How to create a React tree view component.

#javascript #webdev #react #beginners

Quick Summary: in this article, we are going to build a reusable react tree component

A react tree view component is a graphical user interface component that represents a hierarchical view of information, where each item can have several subitems. They are often seen in the sidebar, file manager applications.

Let's start by creating the tree data. The treeData is an array of node objects.

Each node object has the following fields.

key
label
children: The children field is an array of a node object. ```javascript

const treeData = [
{
key: "0",
label: "Documents",
children: [
{
key: "0-0",
label: "Document 1-1",
children: [
{
key: "0-1-1",
label: "Document-0-1.doc",
},
{
key: "0-1-2",
label: "Document-0-2.doc",
},
],
},
],
},
{
key: "1",
label: "Desktop",
children: [
{
key: "1-0",
label: "document1.doc",
},
{
key: "0-0",
label: "documennt-2.doc",
},
],
},
{
key: "2",
label: "Downloads",
children: [],
},
];


```javascript


function App() {
  return (
    <div className="App">
      <h1>React Tree View</h1>
      <Tree treeData={treeData} />
    </div>
  );
}

We then proceed to create a Tree component that takes the treeData as a prop.
The Tree component maps through the treeData and returns a TreeNode component that takes the tree node as a prop.



function Tree({ treeData }) {

  return (

    <ul>

      {treeData.map((node) => (

        <TreeNode node={node} key={node.key} />

      ))}

    </ul>

  );

}

The `TreeNode` component incorporates the following.

A showChildren state is the state responsible for displaying the Tree component.
A handleClick is a click handler function that toggles the showChildren state.

The TreeNode component displays the node label

The TreeNode component also conditionally renders the Tree component if the showChildren state is true and passes the node children to the Tree component as a prop.



function TreeNode({ node }) {

  const { children, label } = node;

const [showChildren, setShowChildren] = useState(false);

const handleClick = () => {

    setShowChildren(!showChildren);

  };

  return (

    <>

      <div onClick={handleClick} style={{ marginBottom: "10px" }}>

        <span>{label}</span>

      </div>

      <ul style={{ paddingLeft: "10px", borderLeft: "1px solid black" }}>

        {showChildren && <Tree treeData={children} />}

      </ul>

    </>

  );

}

This would be the result.

Top comments (9)

Derin Kadir • Mar 7 '23

Very good and easy to follow article, but how do you implement a search filter?

Bellotaiwo • Mar 11 '23

I will write an article on that.

Noxxxx • Sep 12 '23 • Edited

I have written a React tree component with more flexible configurations. You can take a look at it in my repository.react-tree-component

Marlon López • Aug 12 • Edited

What if the 'children' attribute has a differente name among the deepness of the tree data?
ex:

{
  "companies" : { // children at level 1
    "acme": {
      "foundationDate": "anydata",
      "areas" : { // children at level 2
        "area 1": {
        /* more tree levels*/
        },
      }
    },
  }
}