How To Create A Tree Component With React Hooks

Hi everyone! Today we’re going to create a simple expandable tree component with react hooks! Enjoy!

Different Ways To Create A Tree

Before diving into coding let’s discuss the way we’re going to create our tree.

I know atleast two ways of doing that. The first one is creating an actual tree structure where children are rendered inside their parent’s nodes:

Another way is to create a flat structure where parents and their children are rendered on the same level but each node has its own margin wich creates the “tree structure”:

We’ll stick to the second way.

Create A New App

I’ve created a new react app using npx create-react-app and deleted the default files, so right now the project structure looks like this: