Справочник React

Списки React: map и стабильный key

Список компонентов обычно создаётся через map. Каждый соседний элемент должен иметь стабильный key, чтобы React правильно сопоставлял старые и новые узлы.

Рабочий пример

function LessonList({ lessons }) {
  return (
    <ul>
      {lessons.map((lesson) => (
        <LessonItem key={lesson.id} lesson={lesson} />
      ))}
    </ul>
  );
}

key нужен React и не передаётся компоненту как обычный prop. Идентификатор должен происходить из данных и сохраняться при сортировке и удалении.

Когда применять

Индекс допустим только для действительно неизменяемого списка без состояния внутри строк. Генерировать Math.random во время рендера нельзя: ключ будет новым каждый раз.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Использовать индекс в изменяемом списке
• Создавать случайный key
• Пытаться прочитать props.key внутри компонента