How to remove a component from an array in Reactjs

Question

How can I remove an item from the data when clicking the div inside Item?

var App = React.createClass({
  ...
  handleSubmit: function(e) {
    this.state.data.push({ x: this.state.x });
  }
});

The item's class to remove.

var Item = React.createClass({
    render: function() {
      return (
        <li>
          <div onClick={this.removeItem}></div>
        </li>
      )
    }
});

The list class.

var ItemList = React.createClass({
  render: function() {
    var items = this.props.data.map(function(item) {
      return <Item x={item.x}>
    });
  }
});

alltom · Accepted Answer · 2016-01-22 06:57:13Z

4

Since the App component manages the data array, you need to bubble the remove request all the way from Item to ItemList to App.

So pass a callback from App to ItemList:

var App = React.createClass({
  ...
  removeItem: function(index) {
    this.setState(function(state) {
      var newData = state.data.slice();
      newData.splice(index, 1);
      return {data: newData};
    });
  },
  render: function() {
    return (
      ... <ItemList onRemove={this.removeItem} /> ...
    );
  },
  ...
});

And pass that callback into each Item:

var ItemList = React.createClass({
  render: function() {
    var items = this.props.data.map(function(item, index) {
      return <Item x={item.x} index={index} onRemove={this.props.onRemove}>
    }.bind(this));
    ...
  }
});

Finally, call onRemove from Item:

var Item = React.createClass({
  ...
  removeItem: function() {
    this.props.onRemove(this.props.index);
  },
});

edited Jan 22, 2016 at 6:57

answered Jan 22, 2016 at 6:50

alltom

3,2325 gold badges33 silver badges47 bronze badges

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

6 Comments

el_pup_le Over a year ago

In your answer, shouldn't 'removeItem' be 'onRemove'?

el_pup_le Over a year ago

And why are you using 'this.props.x' as a parameter to onRemove

alltom Over a year ago

Yeah, sorry. I found a few errors just after posting. I think I have caught most of them now, but let me know if I missed anything. :)

el_pup_le Over a year ago

Why do you have bind(this)?

alltom Over a year ago

I refer to this.props inside the callback, and the callback isn't guaranteed to have the same this unless you bind it.

|

Collectives™ on Stack Overflow

How to remove a component from an array in Reactjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related