Props and lists

Pass data into components and render lists with keys.

Props are inputs to a component. They flow down from parent to child and are read-only.

React (JSX)

function CourseCard({ title, seats }) {
  return (
    <li>
      {title} {seats === 0 ? "(full)" : `(${seats} seats)`}
    </li>
  );
}

export default function Courses({ courses }) {
  return (
    <ul>
      {courses.map((c) => (
        <CourseCard key={c.id} title={c.title} seats={c.seats} />
      ))}
    </ul>
  );
}

Give each list item a key that stays stable, usually a database id. Using the array index as the key causes bugs when items are reordered.

← Getting started with React State and events →