Nested Lists

💻 React

Nested Lists

A nested list is a list that contains other lists, rendered by using .map() inside another .map(). Each level of nesting requires its own unique key prop, and items at one level only need to be unique among their siblings at that same level, not globally.

Example: Course Sections and Lessons

JSX

const curriculum = [
  {
    id: 'sec-1',
    title: 'Getting Started',
    lessons: [
      { id: 'les-1-1', title: 'Introduction to React',    duration: '10 min' },
      { id: 'les-1-2', title: 'Setting Up Your Environment', duration: '15 min' },
    ],
  },
  {
    id: 'sec-2',
    title: 'Core Concepts',
    lessons: [
      { id: 'les-2-1', title: 'JSX Deep Dive',    duration: '20 min' },
      { id: 'les-2-2', title: 'Props and State',   duration: '25 min' },
      { id: 'les-2-3', title: 'Hooks Explained',   duration: '30 min' },
    ],
  },
];

function Curriculum() {
  return (
    <div className="curriculum">

      {/* Outer .map() — one per section */}
      {curriculum.map((section) => (
        <div key={section.id} className="section-block">
          <h3>{section.title}</h3>

          {/* Inner .map() — one per lesson within this section */}
          <ul>
            {section.lessons.map((lesson) => (
              <li key={lesson.id}>
                <span>{lesson.title}</span>
                <span>{lesson.duration}</span>
              </li>
            ))}
          </ul>

        </div>
      ))}

    </div>
  );
}

Key Uniqueness in Nested Lists: Keys only need to be unique among siblings at the same level. “les-1-1” and “les-2-1” can both exist in different sections because they are not siblings, they belong to different parent elements. However, using globally unique IDs (like database UUIDs) is the safest approach and avoids any confusion.