Build a Simple React Tree View Component

As a developer with over a decade of experience in web technologies, I often turn to React when I need to build interactive front-end experiences.

Recently, I needed a Tree View component for a dashboard project, one that could display hierarchical data, such as folders and files, in a clean, collapsible way.

If you’ve ever worked with nested data in React, you’ll know it can get tricky fast. So in this tutorial, I’ll show you exactly how I built a simple, reusable React Tree View component, step-by-step.

Table of Contents

What is a Tree View Component?

A Tree View is a way to represent hierarchical data, think of your computer’s file explorer.

Each item can expand to show children, and those children can have their own nested items. It’s a great way to show structured data like:

File systems
Organization charts
Product categories
API endpoints

In React, we can build this easily using recursive components or by using existing libraries like react-accessible-treeview.

Method 1 – Build a Custom Tree View from Scratch

Let’s start by building a custom Tree View using plain React. This approach gives you full control over styling, behavior, and data structure.

Step 1 – Prepare the Project

Open your terminal and create a new React app:

npx create-react-app react-treeview-demo
cd react-treeview-demo
npm start

Once the app runs, open src/App.js and clear out the default code.

Step 2 – Create the Tree Data

We’ll use sample data that looks like a folder structure.

// src/data.js
export const treeData = [
  {
    id: 1,
    name: "Documents",
    children: [
      { id: 2, name: "Reports.pdf" },
      {
        id: 3,
        name: "Projects",
        children: [
          { id: 4, name: "ProjectA.docx" },
          { id: 5, name: "ProjectB.docx" },
        ],
      },
    ],
  },
  {
    id: 6,
    name: "Pictures",
    children: [
      { id: 7, name: "Vacation.jpg" },
      { id: 8, name: "Family.png" },
    ],
  },
];

Step 3 – Create the TreeView Component

Here’s the full code for a recursive React Tree View:

// src/TreeView.js
import React, { useState } from "react";

const TreeNode = ({ node }) => {
  const [expanded, setExpanded] = useState(false);

  const hasChildren = node.children && node.children.length > 0;

  return (
    <div style={{ marginLeft: "20px" }}>
      <div
        style={{
          cursor: hasChildren ? "pointer" : "default",
          fontWeight: hasChildren ? "bold" : "normal",
        }}
        onClick={() => hasChildren && setExpanded(!expanded)}
      >
        {hasChildren ? (expanded ? "📂" : "📁") : "📄"} {node.name}
      </div>

      {expanded &&
        hasChildren &&
        node.children.map((child) => (
          <TreeNode key={child.id} node={child} />
        ))}
    </div>
  );
};

const TreeView = ({ data }) => {
  return (
    <div>
      {data.map((node) => (
        <TreeNode key={node.id} node={node} />
      ))}
    </div>
  );
};

export default TreeView;

Step 4 – Use the Component in App.js

Now, import and render the component.

// src/App.js
import React from "react";
import TreeView from "./TreeView";
import { treeData } from "./data";

function App() {
  return (
    <div style={{ padding: "20px" }}>
      <h2>React Tree View Example</h2>
      <TreeView data={treeData} />
    </div>
  );
}

export default App;

Now run your app again, and you’ll see a fully functional Tree View! You can click folders to expand or collapse them.

Step 5 – Add Some Styling (Optional)

You can easily enhance this with CSS:

/* src/App.css */
div {
  font-family: Arial, sans-serif;
}

h2 {
  color: #0078d4;
}

You can refer to the screenshot below to see the output.

This gives it a clean, professional look, perfect for dashboards or admin panels.

Method 2 – Use a Library (react-accessible-treeview)

If you prefer a faster setup, you can use a pre-built library. One of the best options is react-accessible-treeview. It’s lightweight, accessible, and easy to customize.

Step 1 – Install the Library

npm install react-accessible-treeview

Step 2 – Create the Component

// src/TreeViewLibrary.js
import React from "react";
import TreeView from "react-accessible-treeview";
import "react-accessible-treeview/dist/react-accessible-treeview.css";

const data = [
  {
    name: "Home",
    id: "1",
    children: [
      { name: "About", id: "2" },
      {
        name: "Services",
        id: "3",
        children: [
          { name: "Consulting", id: "4" },
          { name: "Development", id: "5" },
        ],
      },
    ],
  },
];

const TreeViewLibrary = () => {
  return (
    <div style={{ padding: "20px" }}>
      <h2>React Tree View (Library Example)</h2>
      <TreeView data={data} aria-label="React Tree" />
    </div>
  );
};

export default TreeViewLibrary;

You can now import this component into App.js and render it just like before.

When Should You Use Each Method?

Custom Tree View:
Use this when you need full control — for example, when integrating with APIs, adding drag-and-drop, or applying custom themes.
Library-based Tree View:
Perfect for quick prototypes or when accessibility and performance are priorities.

Common Use Cases in U.S. Projects

Here are some real-world examples where I’ve used Tree Views:

Managing file structures in document management systems
Displaying product categories in e-commerce dashboards
Navigating organizational hierarchies in HR apps
Browsing API endpoints in developer tools

Tree Views are everywhere, and once you understand the basics, you can customize them for almost any project.

Building a React Tree View component might seem complex at first, but once you understand the recursive logic, it becomes surprisingly simple.

Whether you choose to build your own or use a library, both approaches give you the flexibility to display hierarchical data beautifully.