title: Recursive tree view in ReactJS
body: <p>I'm trying to implement a tree view out of a JSON data with ReactJS, I have most of the work done but I have a problem with the expand and collapse buttons. As it is now when clicking one of the subtrees node successfully expands the whole tree, the problem is that according to the component's state (collapsed / expanded) I want to change the icon. Can someone help me?</p>
  
  <pre><code>import React from 'react';
  import {IconExpand, IconCollapse} from '../components/Icons';
  
  export default class Tree extends React.Component{
      constructor(props){
          super(props);
          const me = this;
          me.state = {
              visible: true
          };
          me.listItem = null;
          me.isVisible = me.isVisible.bind(me);
      }
  
      render(){
          const me = this;
          const {visible} = me.state;
          const {jsonData} = me.props;
  
          let keys = [];
          for (const key in jsonData) {
              if (jsonData.hasOwnProperty(key)) {
                  keys.push(key);
              }
          }
  
          return (
              &lt;ul className="x-tree"&gt;
                  {keys.map((key, index) =&gt; {
                      if(jsonData[key] &amp;&amp; typeof jsonData[key] === 'object'){
                          return (
                              &lt;li 
                                  className="x-tree-item x-tree-item-node"
                                  key={`complex-${key}-${index}`}
                                  ref={el =&gt; { me.listItem = el; }}
                              &gt;
                                  {visible
                                      ? &lt;IconCollapse
                                          className="x-tree-icon"
                                      /&gt;
                                      : &lt;IconExpand
                                          className="x-tree-icon"
                                      /&gt;
                                  }
                                  &lt;span
                                      className="x-tree-key"
                                      onClick={me.onClick.bind(me)}
                                  &gt;
                                      {key}
                                  &lt;/span&gt;
                                  &lt;Tree
                                      jsonData={jsonData[key]}
                                      expanded={true}
                                  /&gt;
                              &lt;/li&gt;
                          )
                      } else {
                          return (
                              &lt;li 
                                  className="x-tree-item"
                                  key={`simple-${key}-${index}`}
                              &gt;
                                  &lt;span className="x-tree-key"&gt;{key}:     &lt;/span&gt;
                                  &lt;span className="x-tree-value"&gt;    {jsonData[key]}&lt;/span&gt;
                              &lt;/li&gt;
                          )
                      }
                  })}
              &lt;/ul&gt;
          );
      }
  
      onClick(event){
          const me = this;
          let node = event.currentTarget;
          let tree = node.nextSibling;
          tree.style.display = tree.style.display === 'none' ? 'block' :     'none';
          me.setState({
              visible: !me.state.visible
          });
          me.isVisible(tree.style.display !== 'none');
      }
  
      isVisible(key){ 
          return key;
      }
  }
  </code></pre>