How to Render Nested List in React: Simple Guide

To render a nested list in React, use the map() function to loop through your list data and create components for each item. For nested items, use a recursive component that calls itself to render sublists inside parent list items.

Syntax

Use the map() function to iterate over an array and return JSX elements. For nested lists, create a component that calls itself recursively to render sub-items.

• items.map(item => ...): loops through list items
• key: unique identifier for each list element
• Recursive call: component calls itself for nested children

jsx

function NestedList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && <NestedList items={item.children} />}
        </li>
      ))}
    </ul>
  );
}

Example

This example shows a nested list of categories with subcategories rendered recursively using a functional React component.

jsx

import React from 'react';

const data = [
  { id: 1, name: 'Fruits', children: [
    { id: 2, name: 'Apple' },
    { id: 3, name: 'Banana' }
  ]},
  { id: 4, name: 'Vegetables', children: [
    { id: 5, name: 'Carrot' },
    { id: 6, name: 'Broccoli', children: [
      { id: 7, name: 'Green Broccoli' },
      { id: 8, name: 'Purple Broccoli' }
    ]}
  ]}
];

function NestedList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && <NestedList items={item.children} />}
        </li>
      ))}
    </ul>
  );
}

export default function App() {
  return <NestedList items={data} />;
}

Output

<ul><li>Fruits<ul><li>Apple</li><li>Banana</li></ul></li><li>Vegetables<ul><li>Carrot</li><li>Broccoli<ul><li>Green Broccoli</li><li>Purple Broccoli</li></ul></li></ul></li></ul>

Common Pitfalls

Common mistakes when rendering nested lists in React include:

• Not providing a unique key prop for list items, which can cause rendering issues.
• Forgetting to check if nested children exist before rendering, leading to errors.
• Using index as key in nested lists, which can cause unexpected behavior when list changes.

Always check for children with item.children && and use stable unique IDs for keys.

jsx

function WrongNestedList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {item.name}
          {/* Missing check for children */}
          <WrongNestedList items={item.children} />
        </li>
      ))}
    </ul>
  );
}

function CorrectNestedList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && <CorrectNestedList items={item.children} />}
        </li>
      ))}
    </ul>
  );
}

Quick Reference

• Use map() to loop over arrays and render list items.
• Always provide a unique key prop for each list item.
• Use recursion to render nested lists by calling the same component inside itself.
• Check if nested children exist before rendering to avoid errors.

Key Takeaways

Use the map() function to render each list item in React.

Create a recursive component to render nested lists cleanly.

Always provide a unique key prop for each list element.

Check if children exist before rendering nested lists to avoid errors.

Avoid using array index as key in nested lists for stable rendering.