Create Folder Structure (using React JS)

 App.js :

--------

import { useState } from "react"

function App() {

  return <div>

    <Folder name="Desktop" isOpen={true} >

      <Folder name="Music" isOpen={false} >

        <File name="hawayein.mp3"/>

        <File name="soorma.mp3"/>

      </Folder>

      <Folder name="Photos" isOpen={true}>

        <File name="dog.jpg"/>

        <File name="cat.png"/>

      </Folder>

    </Folder>

  </div>

}

function Folder(props) {

  const [isOpen, setIsOpen] = useState(true);

  const handleClick = () => {

    setIsOpen(!isOpen)

  }

  const direction = isOpen ? 'down' : 'right'

  const { name, children } = props

  return <div>

    <span onClick={handleClick}>

      <i className="blue folder icon"></i>

      {name}

      <i className={`caret ${direction} icon`}></i>

    </span>

    <div style={{ marginLeft: '17px' }}>

      {isOpen ? children : null}

    </div>

  </div>

}

const File = (props) => {

  // console.log(props.name)

  let fileExtension = props.name.split('.')[1]

  const fileIcons = {

    mp3 : "music",

    jpg : "file image",

    png : "file image outline"

  }

    return <div style={{ marginLeft: '17px' }}>

      <i className={`${fileIcons[fileExtension]} icon`}></i>

      <i> {props.name} </i>

    </div>

  }

export default App;