DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 (4)

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 Author

Glad it helped.

Collapse
 
suhakim profile image
sadiul hakim

Awesome

Collapse
 
taiwobello profile image
Bellotaiwo Author

thanks

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post