import React, { useState } from "react"; import { FaChevronDown, FaChevronRight } from "react-icons/fa"; const TreeNode = ({ node }) => { const [isExpanded, setIsExpanded] = useState(false); const handleToggle = () => { setIsExpanded(!isExpanded); }; return ( <div className=""> <div onClick={handleToggle} className="flex items-center px-4 group rounded-md hover:text-blue-600 hover:bg-blue-200 text-base font-serif"> {Object.keys(node).length > 1 ? ( <span className="mr-2 text-xs "> {isExpanded ? <FaChevronDown /> : <FaChevronRight />} </span> ) : ( <span className="ml-5"></span> )} {node.name} </div> {isExpanded && ( <div className="ml-5 "> {Object.keys(node).map((key) => { if (Array.isArray(node[key])) { return node[key].map((child) => ( <TreeNode key={child.name} node={child} /> )); } return null; })} </div> )} </div> ); }; // Define the Tree component const Tree = ({ data }) => { return ( <div className=""> {data.map((node) => ( <TreeNode key={node.id} node={node} /> ))} </div> ); }; const states = [ { name: "Gujarat", districts: [ { name: "Surat", cities: [ { name: "varachha", area: [ { name: "yogivhowk" }, { name: "varachha" }, { name: "puna" }, ], }, { name: "kamrej", area: [{ name: "tapi" }, { name: "choryashi" }], }, ], }, { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] }, ], }, { name: "Rajasthan", districts: [ { name: "Surat", cities: [ { name: "varachha", area: [ { name: "yogivhowk" }, { name: "varachha" }, { name: "puna" }, ], }, { name: "kamrej", }, ], }, { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] }, ], }, { name: "Bihar", districts: [ { name: "Surat", cities: [ { name: "varachha", area: [ { name: "yogivhowk" }, { name: "varachha" }, { name: "puna" }, ], }, { name: "kamrej", }, ], }, { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] }, ], }, { name: "delhi", districts: [ { name: "Surat", cities: [ { name: "varachha", area: [ { name: "yogivhowk" }, { name: "varachha" }, { name: "puna" }, ], }, { name: "kamrej", }, ], }, { name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] }, ], }, ]; function App() { return ( <div className="flex flex-col w-60 h-96 border border-gray-300 rounded-md p-4 m-auto mt-52 overflow-y-scroll bg-blue-50"> <Tree data={states} /> </div> ); } export default App;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter