React multiple input (array of inputs) not working

Question

So I'm attempting to render multiple input fields with React. Everything looks fine until I remove an item. Always the last item is being "removed". If you want to try my code, write "A" in input field 1, "B" in 2, "C" in 3 and remove "B". You'll notice that you have removed "C" instead.

I have tried both value and defaultValue for input to no avail. I have also tried giving a name to the input. I think I am missing a key point here.

Any recommendations?

var MultiInput = React.createClass({
  getInitialState: function() {
    value = this.props.value
    // force at least one element
    if (!value || value == '') {
      value = [ null ]
    }

    return {
      value: value
    }
  },
  getDefaultProps: function() {
    return {
    }
  },
  add_more: function() {
    new_val = this.state.value.concat([])
    new_val.push(null)
    this.setState({ value: new_val })
  },
  remove_item: function(e, i) {
    new_state = this.state.value.concat([])
    new_state.splice(i,1)
    this.setState({ value: new_state })
  },
  render: function() {
    me = this

    // console.log(this.state.value)
    lines = this.state.value.map( function(e, i) {
      return (
        <div key={i}>
          <input value={e} />
          <button onClick={me.remove_item} >X</button>
        </div>
      )
    })

    return (
      <div>
        {lines}
        <button onClick={this.add_more}>Add More</button>
      </div>
    )
  }
})

Michelle Tilley · Accepted Answer · 2015-08-26 00:46:38Z

There are a few things going on here.

To start, you shouldn't use the array index as the key when rendering in an array:

lines = this.state.value.map( function(e, i) {
  return (
    <div key={i}>
      <input value={e} />
      <button onClick={me.remove_item} >X</button>
    </div>
  )
})

The first time through, ["A", "B", "C"] renders:

    <div key={0}>
      ...
    </div>
    <div key={1}>
      ...
    </div>
    <div key={2}>
      ...
    </div>

Then, the second time, once you've removed "B" and left ["A", "C"], it renders the following:

    <div key={0}>
      ...
    </div>
    <div key={1}>
      ...
    </div>

So, when you removed item at index 1, the item previous at index 2 moves to index 1. You'll want to use some unique value that doesn't change when the position in the array changes.

Second, you should use the empty string instead of null for initialization, and then you'll see that you can't type anything in your inputs. That's because value ensures that an input's value is always whatever you pass it; you'd have to attach an onChange handler to allow the value to be edited.

Changing to defaultValue allows you to type in the box, but when you type, the string in this.state.value doesn't get updated--you'd still need an onChange handler.

Finally, your button has an onClick of this.remove_item, but your remove_item method seems to take the event and index as parameters. However, React will not pass the current index to remove_item; you would need to create a new function that passes the correct params:

onClick={me.remove_item.bind(null, i)}

That said, you really shouldn't call Function#bind inside render as you'll create new functions every time it runs.

Thank you very much for your time! I'm updating my question with code that works =)

Abdo · Accepted Answer · 2015-08-26 08:39:24Z

Working Code

@BinaryMuse clearly explains why my code above doesn't work: by removing an item from the array and render is called again, the items change position and apparently React's algorithm picks the "wrong changes" because the key we're providing has changed.

I think the simplest way around this is to not remove the item from the array but rather replace it with undefined. The array would keep growing with this solution but I don't think the number of actions would slow this down too much, especially that generating a unique id that doesn't change might involve storing this ID as well.

Here's the working code: (If you wish to optimize it, please check @BinaryMuse's suggestions in the accepted answer. My MultInput uses a custom Input component that is too large to paste here =) )

var MultiInput = React.createClass({
  getInitialState: function() {
    value = this.props.value
    if (!value || value == '') {
      value = [ '' ]
    }

    return {
      value: value
    }
  },
  getDefaultProps: function() {
    return {
    }
  },
  add_more: function() {
    new_val = this.state.value.concat([])
    new_val.push('')
    this.setState({ value: new_val })
  },
  remove_item: function(i,e) {
    new_state = this.state.value.concat([])
    new_state[i] = undefined
    this.setState({ value: new_state })
  },
  render: function() {
    me = this

    lines = this.state.value.map( function(e, i) {
      if (e == undefined) {
        return null
      }

      return (
        <div key={i}>
          <input defaultValue={e} />
          <button onClick={me.remove_item.bind(null, i)} >X</button>
        </div>
      )
    }).filter( function(e) {
      return e != undefined
    })

    return (
      <div>
        {lines}
        <button onClick={this.add_more}>Add More</button>
      </div>
    )
  }
})

Collectives™ on Stack Overflow

React multiple input (array of inputs) not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related