ReactJS: removing one item from state array

Question

I am trying to remove an Item from state array based on it's index and I am getting inconsistent results:

My component:

<ul ref="exception-list">
  {this.state.exceptions.map(function(exception, c){
    return <div key={c}>
      <br/>

      <small><p>Time Range: <span className="slider-time">{exception.start.toString()}</span> - <span className="slider-time2">{exception.end.toString()}</span></p></small>
      <div className="sliders_step1" name={c} key={c}>
          <div className="slider-range" name={c} key={c} ></div>
      </div>
      <a onClick={this.clearOne.bind(null, c)}>clear1</a>
      </div>}, this)}
</ul>

As you can see I am passing in c (count/index) into my function clearOne:

    clearOne: function(index) {
        console.log("index from clearOne", index)
        this.setState({exceptions: this.state.exceptions.filter((x,i) => i != index )})

},

In theory this should work but I seem to be getting very mixed results. That is, the correct item is not being deleted properly in all cases. Sometimes an index one ahead gets deleted. Am I doing something obviously wrong? I can provide more info if needed.

Possible duplicate of [Removing an item causes React to remove the last DOM node instead of the one associated with that item](http://stackoverflow.com/questions/30406811/removing-an-item-causes-react-to-remove-the-last-dom-node-instead-of-the-one-ass) — pizzarob, Jul 14 '16 at 23:36
I had this same problem once. The issue is using the index as the key check out the answer for this question: http://stackoverflow.com/questions/30406811/removing-an-item-causes-react-to-remove-the-last-dom-node-instead-of-the-one-ass — pizzarob, Jul 14 '16 at 23:36

ReactJS: removing one item from state array

0 Answers0