How can I open/close a nested list using React, so that when you click on the parent li the children are hidden? Here's what I used to create the list.
list.js
class List extends React.Component {
render(){
return (
<ul>
{this.props.list.map(function(item){
return (
<li> <ListItem key={item.id} item={item} /> <List list={item.children} /> </li>
);
})}
</ul>
);
}
list-item.js
class ListItem extends React.Component {
handleCollapse(){
console.log('Open/Close: ' + this.props.item.display_name);
return false;
}
handleFilter(){
console.log('Filter id: ' + this.props.item.id);
return false;
}
render(){
return (
<div> <a rel="{this.props.item.id}" onClick={this.handleCollapse.bind(this)}>
{this.props.item.display_name}
</a> <input value="" type="checkbox" onClick={this.handleFilter.bind(this)} /> </div>
)
}