Skip to content

Instantly share code, notes, and snippets.

@michelts
Last active November 23, 2021 01:59
Show Gist options
  • Save michelts/8fa36a30226a36eabb087b8dd9ff4677 to your computer and use it in GitHub Desktop.
Save michelts/8fa36a30226a36eabb087b8dd9ff4677 to your computer and use it in GitHub Desktop.
const FolderTree = ({folders}) => (
<ul>
{folders.map(folder => (
<Item key={folder.name} folder={folder} />
))}
</ul>
);
const Item = ({folder}) => {
const [isOpen, setIsOpen] = useState(false);
return (
<li>
<button type="button" onClick={() => setIsOpen((state) => !state)}>
{isOpen ? "-" : "+"}
</button>{" "}
{folder.name}
{isOpen && folder.contents?.length > 0 && (
<FolderTree folders={folder.contents} />
)}
</li>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment