title: Open and Close a recursively nested list in React js
body: <p>I'm looking to be able to 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.</p>
  
  <p>list.js</p>
  
  <pre><code>class List extends React.Component {
  
  render(){
      return (
          &lt;ul&gt;
              {this.props.list.map(function(item){
                  return (
                  &lt;li&gt;
                      &lt;ListItem key={item.id} item={item} /&gt;
                      &lt;List list={item.children} /&gt;
                  &lt;/li&gt;
                  );
              })}
          &lt;/ul&gt;
      );
  }
  </code></pre>
  
  <p>list-item.js</p>
  
  <pre><code>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 (
          &lt;div&gt;
              &lt;a rel="{this.props.item.id}" onClick={this.handleCollapse.bind(this)}&gt;
                  {this.props.item.display_name}  
              &lt;/a&gt;
              &lt;input value="" type="checkbox" onClick={this.handleFilter.bind(this)} /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>