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: [],
},
];
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 theTree
component. - A
handleClick
is a click handler function that toggles theshowChildren
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>
</>
);
}
Top comments (9)
Very good and easy to follow article, but how do you implement a search filter?
I will write an article on that.
I have written a React tree component with more flexible configurations. You can take a look at it in my repository.react-tree-component
What if the 'children' attribute has a differente name among the deepness of the tree data?
ex:
This is awesome! I have no idea about this Tree Component. I'll save this article
Glad it helped.
Awesome
thanks
Great article! Thanks!