title: Display a collapsable folder/file tree structure based on array/json object in React/Javascript
body: <p>I want to build and display a collapsable tree structure in a react project that is created based on an array object that I get as a response from a backend endpoint call. I want to take the complex json object/ array of files and display then as they appear in the complex json object structure. Does anyone know how to approach something like this or a tool that i can use to accomplish this. </p>
  
  <p>I want to take an object like this:</p>
  
  <pre><code>data = [
    {
      type: "folder",
      name: "animals",
      path: "/animals",
      children: [
        {
          type: "folder",
          name: "cat",
          path: "/animals/cat",
          children: [
            {
              type: "folder",
              name: "images",
              path: "/animals/cat/images",
              children: [
                {
                  type: "file",
                  name: "cat001.jpg",
                  path: "/animals/cat/images/cat001.jpg"
                }, {
                  type: "file",
                  name: "cat001.jpg",
                  path: "/animals/cat/images/cat002.jpg"
                }
              ]
            }
          ]
        }
      ]
    }
  ];
  </code></pre>
  
  <p>and display it in a react component so that the user sees something like this when he clicks on a dialog box in order to see and click on a file withihn any folder:</p>
  
  <pre><code>root
  |_ fruits
  |___ apple
  |______images
  |________ apple001.jpg
  |________ apple002.jpg
  |_ animals
  |___ cat
  |______images
  |________ cat001.jpg
  |________ cat002.jpg
  </code></pre>
  
  <p>I have no idea on how to approach getting from the json object to rendering the files structure with clickable files in react component. </p>