How to remove an item from a list with a click event in ReactJS?

Question

var FilterList = React.createClass({ remove: function(item){ this.props.items = this.props.items.filter(function(itm){ return item.id !== itm.id; }); return false; }, render: function() { var createItem = function(item) { return ( <li> <span>{item}</span> <a href data-id="{item.id}" class="remove-filter" onClick={this.remove.bind(item)}>remove</a> </li> ); }; return <ul>{this.props.items.map(createItem.bind(this))}</ul>; } }); var FilterApp = React.createClass({ getInitialState: function() { return {items: [], item: { id: 0, type: null }}; }, onChangeType: function(e){ this.setState({ item: { id: this.state.items[this.state.items.length], type: e.target.value } }); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.item]); var item = {}; this.setState({items: nextItems, item: {}}); }, render: function() { return ( <div> <h3>Filters</h3> <FilterList items={this.state.items} /> <form className="filter" onSubmit={this.handleSubmit}> <fieldset> <legend>Filter</legend> <div className="form-grp"> <select name="type" onChange={this.onChangeType}> <option>foo</option> <option>bar</option> <option>baz</option> </select> </div> </fieldset> <div className="actions"> <button>{'Add #' + (this.state.items.length + 1)}</button> </div> </form> </div> ); } }); React.render(<FilterApp />, document.body); 

It seems I can’t plunge into the head how to remove an item from the list. Probably creating a ton of other bad design decisions here, newbs.

Answer 1

The details on the components are immutable, that is, you cannot directly change them. In the above example, if the FilterList component wants to remove an element, it will need to call a callback from the parent component.

A simplified example of this .

FilterApp passes the delete function to FilterList , which is called in the onClick event. This will remove the element from the parent, update the state, and then re-render the FilterList with the new content.

Hope this helps.

Answer 2

Something like below should work. Let your root component control the state.

 var FilterList = React.createClass({ render: function() { var createItem = function(item) { return ( <li> <span>{item}</span> <a href data-id="{item.id}" class="remove-filter" onClick={this.props.remove.bind(item)}>remove</a> </li> ); }; return <ul>{this.props.items.map(createItem.bind(this))}</ul>; } }); var FilterApp = React.createClass({ getInitialState: function() { return {items: [], item: { id: 0, type: null }}; }, onChangeType: function(e){ this.setState({ item: { id: this.state.items[this.state.items.length], type: e.target.value } }); }, remove: function(item, ev){ ev.preventDefault(); var items = this.state.items.filter(function(itm){ return item.id !== itm.id; }); this.setState({ items: items }); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.item]); var item = {}; this.setState({items: nextItems, item: {}}); }, render: function() { return ( <div> <h3>Filters</h3> <FilterList remove={this.remove} items={this.state.items} /> <form className="filter" onSubmit={this.handleSubmit}> <fieldset> <legend>Filter</legend> <div className="form-grp"> <select name="type" onChange={this.onChangeType}> <option>foo</option> <option>bar</option> <option>baz</option> </select> </div> </fieldset> <div className="actions"> <button>{'Add #' + (this.state.items.length + 1)}</button> </div> </form> </div> ); } }); React.render(<FilterApp />, document.body);