Dynamically add/remove input with react, how do I save the data?

Question

I have been trying to create a dynamic form with React and Meteor but have run into a problem.

This is my form:

  appendInput() { var newInput = `input-${this.state.inputs.length}`; console.log (newInput); this.setState({ inputs: this.state.inputs.concat([newInput]) }); } render() { return ( <div className="background-container"> <form ref={(input) => this.sparkForm = input} onSubmit={(e) => this.createSpark(e)}> <ControlLabel>Select your person (optional)</ControlLabel> <select id="formControlsPerson" placeholder="Choose your person" className="form-control" ref={(input) => this.person = input}> <option value='select'>Select your person</option> <option value='jane'>Jane Siesta</option> <option value='ben'>Ben Huang</option> <option value='han'>Han Han</option> <option value='mau'>Mau Mau</option> <option value='void'>VOID</option> <option value='tommy'>Tommy Hendriks</option> <option value='gareth'>Gareth Williams</option> <option value='gigi'>Gigi Lee</option> </select> <ControlLabel>Select your location (optional)</ControlLabel> <select id="formControlsLocation" placeholder="Choose your location" className="form-control" ref={(input) => this.location = input}> <option value='select'>Select your location</option> <option value='shelter'>Shelter</option> <option value='mansion'>The Mansion</option> </select> <ControlLabel>Title</ControlLabel> <input type="text" label="Title" placeholder="Enter your title" className="form-control" ref={(input) => this.title = input}/> <ControlLabel>Add Image</ControlLabel> <div className="upload-area"> <p className="alert alert-success text-center"> <span>Click or Drag an Image Here to Upload</span> <input type="file" id="input" className="file_bag" onChange={this.upload} /> </p> </div> <ControlLabel>Content</ControlLabel> <div className='_quill'> <ReactQuill toolbar={false} theme="snow" ref='editor' onChange={this.onChange} events={events} /> </div> <br /> <ControlLabel>Media (optional)</ControlLabel> <div id="dynamicInput"> {this.state.inputs.map(input => <input key={input} type="text" label="Media" placeholder="Add your media url" className="form-control" ref={(input) => this.mediaUrl = input}/> )} </div> <Button onClick={ () => this.appendInput() }> Add media field </Button> <Button type="submit" data-dismiss="modal">Submit</Button> 

I am able to add an extra field to the form with the function you see above. I do have two problems now.

1. How am I able to get the value from the added fields? I can get the value from the first function the way I used to get it from a normal input field, but of course this doesn't work with the other added fields. I don't know how to solve this.

2. How can I remove the added field?

Hope someone can help me finish this!

Answer 1

Change this.mediaUrl to this.mediaUrls (array) and loop over it to get the values

The way you're doing it causes this.mediaUrl to have the value of the last input only. Since there's multiple inputs, you need to keep track of all of them.

{this.state.inputs.map((input, idx) => <input key={input} type="text" label="Media" placeholder="Add your media url" className="form-control" ref={(input) => this.mediaUrls[idx] = input}/> )}