Rendering Lists and Keys

Rendering Arrays of Elements

Use Array.map() to transform a data array into JSX. Each item must have a stable, unique key prop so React can efficiently reconcile the list when items are added, removed, or reordered.

const courses = [
  { id: 1, name: "React Fundamentals", duration: "4 weeks" },
  { id: 2, name: "Next.js Mastery", duration: "6 weeks" },
  { id: 3, name: "TypeScript Deep Dive", duration: "3 weeks" },
];

function CourseList() {
  return (
    <ul>
      {courses.map(course => (
        <li key={course.id}>
          <strong>{course.name}</strong> — {course.duration}
        </li>
      ))}
    </ul>
  );
}

Choosing keys

• Use a database ID or stable unique string when available.
• As a last resort, use the array index — but this causes bugs when items are reordered.
• Keys must be unique among siblings, not globally.