Adding/removing input fields

Question

I'm pretty new to ReactJS, I'm liking it a lot, but there are some things like binding that seems to be easier in Angular.

I want to have a form, where a user can click a button to add extra input fields. At any point, they can also "delete" an input field.

On the submit, I want to get these inputs as an array, i.e. pass dynamicInputs to my API which contains an array of name.

This is what I've done (which is probably wrong since I'm treating React like Angular):

var React = require('react');

module.exports = React.createClass({
    addInputField: function(e) {
        e.preventDefault();

        var inputs = this.state.inputs;
        inputs.push({name: null});
        this.setState({inputs : inputs});
    },
    removeInputField: function(index) {
        var inputs = this.state.inputs;
        inputs.splice(index, 1);
        this.setState({inputs : inputs});
    },
    handleSubmit: function (e) {
        e.preventDefault();
        // What do I do here?
    },
    getInitialState: function() {
        return {inputs : []};
    },
    render: function (){
        var inputs = this.state.inputs;
        return (
            // Setting up the form
            // Blah blah
           <div className="form-group">
               <label className="col-sm-3 control-label">Dynamic Inputs</label>
               <div className="col-sm-4">
                   {inputs.map(function (input, index) {
                       var ref = "input_" + index;
                       return (
                           <div className="input-group">
                                <input type="text" className="form-control margin-bottom-12px" placeholder="Enter guid" value={input.name} ref={ref} aria-describedby={ref} />
                                <span className="input-group-addon" onClick={this.removeInputField.bind(this, index)} id={ref} ><i className="fa fa-times"></i></span>
                           </div>
                       )
                   }.bind(this))}
                    <button className="btn btn-success btn-block" onClick={this.addInputField}>Add Input</button>
               </div>
           </div>
        );
    }
});

Right now removeInputField does NOT work! It just removes the last entry all the time.

Have you checked the console? It should state you must have a key for your <div className="input-group"> — zerkms
– zerkms, Commented Apr 15, 2015 at 23:41

zerkms · Accepted Answer · 2015-04-16 00:12:01Z

2

Every <div className="input-group"> must have a unique key

<div className="input-group" key={index}>

That's how React distinguishes between collection of rendered nodes.

References:

https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

UPD:

As @WiredPrairie mentioned below in the comments - the suggested solution is far from ideal, since the index is not unique enough. And instead you need to create another array with some unique identifiers (a monotonously growing sequence would be enough) and maintain it in parallel with this.state.inputs and use its values as keys.

So, on adding an element you:

this.keys.push(++this.counter);

on removing - remove from both by the same index. And in the .map you

<div className="input-group" key={this.keys[index]}>

edited Apr 16, 2015 at 0:12

answered Apr 15, 2015 at 23:38

zerkms

256k73 gold badges447 silver badges551 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

WiredPrairie Over a year ago

Using index can lead to problems though when dealing with an array where items are removed/added.

zerkms Over a year ago

@WiredPrairie that's a valid point. Then OP needs to maintain an array of unique values separately.

zerkms Over a year ago

@WiredPrairie added a fix :-)

praveenkumar Over a year ago

@zerkms now i am not have enough knowledge to apply your answer could you please elaborate it, because i am also have this same issue

Collectives™ on Stack Overflow

Adding/removing input fields

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related