Списки и ключи

В JSX нет своего цикла. Чтобы вывести массив, его превращают в массив элементов методом map — тем же, что вы использовали в учебнике. Каждому элементу при этом нужен ключ: по нему React отличает элементы списка друг от друга.

Список через map

Откройте src/App.jsx и выведите массив строк:

// src/App.jsx
export default function App() {
  const todos = ['Купить молоко', 'Позвонить Олегу', 'Прочитать книгу'];
 
  return (
    <ul>
      {todos.map((text) => (
        <li key={text}>{text}</li>
      ))}
    </ul>
  );
}

map возвращает массив элементов li, а JSX выводит его подряд. На странице появится список из трёх пунктов.

Ключи

Проп key — уникальная строка или число для каждого элемента списка. Когда список меняется, React по ключам понимает, какой элемент добавился, удалился или переместился, и обновляет только его. Лучший ключ — идентификатор из данных:

// src/App.jsx
import TodoItem from './components/TodoItem.jsx';
 
const todos = [
  { id: 1, text: 'Купить молоко', done: false },
  { id: 2, text: 'Позвонить Олегу', done: true },
  { id: 3, text: 'Прочитать книгу', done: false },
];
 
export default function App() {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

Ключ ставят на тот элемент, который возвращает map, — здесь это TodoItem, а не li внутри него. Сам компонент TodoItem проп key не получает: React забирает его себе.

Компонент списка

Список удобно вынести в отдельный компонент — src/components/TodoList.jsx:

// src/components/TodoList.jsx
import TodoItem from './TodoItem.jsx';
 
export default function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

В App останется одна строка: <TodoList todos={todos} />. Страница будет выглядеть так же.

Фильтрация перед выводом

Методы массивов соединяют в цепочку. Чтобы показать только невыполненные задачи:

// src/components/TodoList.jsx
export default function TodoList({ todos }) {
  const active = todos.filter((todo) => !todo.done);
 
  return (
    <ul>
      {active.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

В списке останутся две задачи: «Позвонить Олегу» отмечена как выполненная и не выводится.

Какой ключ выбрать

Частая ошибка

Без key список выводится, но в консоли браузера появляется предупреждение «Each child in a list should have a unique key prop». Индекс в роли ключа убирает предупреждение, но при удалении или сортировке задач React может перепутать элементы — например, отметка в поле ввода останется у другого пункта. Используйте id из данных.