DEV Community

Cover image for How to create a React tree view component.
Bellotaiwo
Bellotaiwo

Posted on

How to create a React tree view component.

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.
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: [],
  },
];
Enter fullscreen mode Exit fullscreen mode
function App() {
  return (
    <div className="App">
      <h1>React Tree View</h1>
      <Tree treeData={treeData} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

This would be the result.

React Tree component

Top comments (9)

Collapse
 
dk_f7dffe119b21a profile image
Derin Kadir

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

Collapse
 
taiwobello profile image
Bellotaiwo

I will write an article on that.

Collapse
 
noxxxxxxxx profile image
Noxxxx • 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

Collapse
 
marlonlom profile image
Marlon López • 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*/
        },
      }
    },
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
matiasriveroctrl profile image
Matías Rivero

This is awesome! I have no idea about this Tree Component. I'll save this article

Collapse
 
taiwobello profile image
Bellotaiwo

Glad it helped.

Collapse
 
suhakim profile image
sadiul hakim

Awesome

Collapse
 
taiwobello profile image
Bellotaiwo

thanks

Collapse
 
twanttobealighi profile image
Daria Moreno-Gogoleva

Great article! Thanks!