JSX & Components

Lists and Keys

Use JavaScript's map to turn an array of data into a list of elements.

const courses = [
  { id: 1, title: "HTML" },
  { id: 2, title: "CSS" },
  { id: 3, title: "JavaScript" },
];

function CourseList() {
  return (
    <ul>
      {courses.map((c) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

Each item needs a unique, stable key so React can tell items apart when the list changes.