Skip to content

Instantly share code, notes, and snippets.

@Daniel15
Last active May 27, 2017 15:42
Show Gist options
  • Select an option

  • Save Daniel15/7969014 to your computer and use it in GitHub Desktop.

Select an option

Save Daniel15/7969014 to your computer and use it in GitHub Desktop.
Item/List classes in React
var Item = React.createClass({
render: function() {
return(
<li>
... Item goes here ...
<input type="checkbox" checked={this.props.selected} onChange={this.onChange} />
</li>
);
},
onChange: function(event) {
if (event.target.checked) {
this.props.onSelect(this.item.id);
} else {
this.props.onDeselect(this.item.id);
}
}
});
var List = React.createClass({
getInitialState: function() {
return {
selected: {}
}
},
render: function() {
var items = this.props.items.map(this.renderItem);
return (
<ul>
{items}
</ul>
);
},
renderItem: function(item) {
return (
<Item
item={item}
selected={this.selected(item.id)}
onSelect={this.onSelect}
onDeselect={this.onDeselect}
);
},
selected: function(itemID) {
return !!this.state.selected[itemID];
},
select: function(itemID) {
var selected = this.state.selected;
selected[itemID] = true;
this.setState({ selected: selected });
},
deselect: function(itemID) {
var selected = this.state.selected;
delete selected[itemID];
this.setState({ selected: selected });
}
})
@suryanaga
Copy link

Thanks for this! Really useful.

One thing - Is the function name on line 45 supposed to be onSelect rather than select?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment