Create Folder Structure in ReactJs - salimakhtar92/ReactJs GitHub Wiki

{
  "name": "root",
  "items": [
    {
      "name": "src",
      "items": [
        {
          "name": "components",

          "items": [
            {
              "name": "login",
              "items": [
                {
                  "name": "login.js"
                },
                {
                  "name": "login.css"
                }
              ]
            },
            {
              "name": "list",
              "items": [
                {
                  "name": "list.js"
                },
                {
                  "name": "list.css"
                }
              ]
            }
          ]
        },
        {
          "name": "containers"
        },
        {
          "name": "services"
        }
      ]
    },
    {
      "name": "public",
      "items": [
        {
          "name": "index.html"
        }
      ]
    }
  ]
}

import React, { useState } from "react";

export default function Folder({ mockData }) {
  console.log(mockData);
  const [expand, setExpand] = useState(false);
  if (mockData.items) {
    return (
      <div className="App">
        <h4 onClick={() => setExpand(!expand)}>{mockData.name}</h4>
        <div
          style={{ display: expand ? "block" : "none", paddingLeft: "20px" }}
        >
          {mockData.items &&
            mockData.items.map((item) => <Folder mockData={item} />)}
        </div>
      </div>
    );
  } else {
    return <h4>{mockData.name}</h4>;
  }
}

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import mockData from "./mock-data.json";
import Folder from "./folder";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Folder mockData={mockData} />
  </StrictMode>,
  rootElement
);

root
  src
     components
        login
           login.js
           login.css
        list
           list.js
           list.css
     containers
     services
  public
      index.html