title: Render directory structure data with n numbers of levels in react js
body: <p>I have a sample data set of directory structure as follows</p>
  
  <p><a href="http://www.jsoneditoronline.org/?id=f9ce34de42f1a395e172f81c0c850da1" rel="nofollow noreferrer">http://www.jsoneditoronline.org/?id=f9ce34de42f1a395e172f81c0c850da1</a></p>
  
  <p>Similar to directories the level can be of n numbers.</p>
  
  <p>In react I want to create a directory structure using this data with onClick event.
  For example on the first page the root directories children should be displayed, and when I click on first child, first child's children should be displayed.</p>
  
  <p><a href="https://i.stack.imgur.com/0HDHE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0HDHE.png" alt="enter image description here"></a></p>
  
  <p>This is what I want, initially only 3 folders were visible at root level.</p>
  
  <p><a href="https://i.stack.imgur.com/2ezS8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ezS8.png" alt="enter image description here"></a></p>
  
  <p>When I clicked on child2 at level 1 other two children got visible,</p>
  
  <p><a href="https://i.stack.imgur.com/C0NyO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C0NyO.png" alt="sample Image"></a></p>
  
  <p>and when again clicked on child 2 its 2 children were visible.
  Now if I click any other directory its children should be visible.</p>
  
  <p>Can you please suggest me the correct way to get it implemented in reactJs with redux?
  Thanks</p>