title: Nested Tree with Parent Id from same JSON using Reactjs
body: <p>I am attempting to create a nested tree of sorts using Reactjs.</p>
  
  <ul>
  <li>Parent
  
  <ul>
  <li>Child</li>
  </ul></li>
  </ul>
  
  <p>My JSON looks something like this </p>
  
  <pre><code>[{
      id: 45,
      parentId: 0;
  },
  {
      id: 49,
      parentId: 45;
  }]
  </code></pre>
  
  <p>My thought was to create a TreeLevel and have a click handler on each <code>&lt;li&gt;</code>. If there are children, it would then append that <code>&lt;ul&gt;</code> to the <code>&lt;li&gt;</code></p>
  
  <pre><code>//Here is my component call
  &lt;TreeLevel pId={pId} treeData={treeData} /&gt; 
  
  //-- component
  const TreeLevel = (props) =&gt; {
      const temp = props.treeData.filter(tree =&gt; {
           return tree.parentId === props.pId;
      });
  
      const lis = temp.map((li, index) =&gt; {
          return (
              &lt;li key={index} onClick={() =&gt; showChildren(li.id, props.treeData)}&gt;
                  {li.name}
  
              &lt;/li&gt;
          );
      });
  
      return &lt;ul&gt;{lis}&lt;/ul&gt;
  }
  
  function showChildren(pId, treeData) {
      // this doesn't work, but the idea of what I want it to do
      return ( &lt;TreeLevel pId={pId} treeData={treeData} /&gt;);
  }
  
  class Tree extends Component {
      render() {
          const { treeData, pId } = this.props;
  
          return (
                  &lt;TreeLevel pId={pId} treeData={treeData} /&gt;
          );
      }
  }
  </code></pre>
  
  <p>And here is my main call from the App.js</p>
  
  <pre><code>class App extends Component {
      state = {
          parentId: 0,
          treeData: [ // array of objects here
          ]
      };
  
    render() {
      const { treeData, pId } = this.state;
  
      return (
        &lt;div&gt;
          &lt;Tree treeData={treeData} pId={parentId} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>I can get the first level (parentId = 0), but when I tried to put a <strong>click event</strong> on each of the <code>&lt;li&gt;</code> tags, I don't know how to <strong>append the HTML</strong> from the <code>TreeLevel</code> component to the DOM, let alone in the correct location.</p>
  
  <p>I was using the following tutorial as a loose guide. <a href="https://www.taniarascia.com/getting-started-with-react/" rel="nofollow noreferrer">React Tutorial</a></p>
  
  <p>Any thoughts?</p>