Lists and Keys

Render collections by transforming data into elements. A key tells React which item corresponds to which previous item across inserts, removals, and reordering.

Map data into elements

01function LessonList({ lessons }) {
02  return <ol>{lessons.map((lesson) => (
03    <li key={lesson.id}><a href={lesson.href}>{lesson.title}</a></li>
04  ))}</ol>;
05}

Keys must be unique among siblings and stable for the lifetime of the item. Use an ID from the data.

Preserve identity

Do not generate keys while rendering and avoid array indexes when items can move or be deleted. Incorrect keys can preserve state on the wrong row.

01const visible = courses.filter((course) => course.available);
02return visible.map((course) => <CourseRow key={course.slug} course={course} />);

Keep this

Transform collections declaratively and choose keys from stable data identity, not rendering position.