Как правильно использовать цикл внутри JSX в React?

Используйте метод map() для итерации по массиву

Проблема вашего кода в том, что JSX — это декларативный синтаксис, который не поддерживает императивные конструкции, такие как for, while или if напрямую. Вместо этого React ожидает, что внутри фигурных скобок {} будет выражение, возвращающее значение (массив, строку, число или React-элемент). Цикл for — это инструкция, а не выражение, поэтому он не может быть использован внутри JSX.

Правильный подход — использовать метод map() для массива. Он создаёт новый массив, преобразуя каждый элемент в JSX-элемент. Вот исправленный код:

function TaskList() {
  const tasks = ['Купить молоко', 'Сделать зарядку', 'Написать код'];
  
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>{task}</li>
      ))}
    </ul>
  );
}

Почему это работает?

• Выражение внутри JSX: tasks.map(...) возвращает массив React-элементов, которые React может рендерить.
• Ключи (key): В React каждый элемент в списке должен иметь уникальный key для эффективного обновления DOM. В примере используется index, но лучше использовать уникальный идентификатор из данных (например, task.id), если он есть.
• Стрелочная функция: Она неявно возвращает JSX-элемент благодаря круглым скобкам ().

Дополнительные примеры

Если вам нужно отфильтровать данные перед рендерингом, можно комбинировать методы:

function TaskList() {
  const tasks = [
    { id: 1, text: 'Купить молоко', done: true },
    { id: 2, text: 'Сделать зарядку', done: false },
    { id: 3, text: 'Написать код', done: false }
  ];
  
  return (
    <ul>
      {tasks
        .filter(task => !task.done)
        .map(task => (
          <li key={task.id}>{task.text}</li>
        ))
      }
    </ul>
  );
}

Также можно использовать Array.from() для создания цикла по числовому диапазону:

function NumberList() {
  return (
    <ul>
      {Array.from({ length: 5 }, (_, i) => (
        <li key={i}>Элемент {i + 1}</li>
      ))}
    </ul>
  );
}

Что делать, если нужен сложный цикл?

Если логика цикла слишком сложна для одной строки, вынесите её в отдельную переменную:

function TaskList() {
  const tasks = ['Купить молоко', 'Сделать зарядку', 'Написать код'];
  
  const taskItems = [];
  for (let i = 0; i < tasks.length; i++) {
    taskItems.push(<li key={i}>{tasks[i]}</li>);
  }
  
  return <ul>{taskItems}</ul>;
}

Этот подход тоже работает, но менее идиоматичен для React. Используйте map() — это стандарт.

function TaskList() {
  const tasks = ['Купить молоко', 'Сделать зарядку', 'Написать код'];
  const listItems = [];
  
  for (let i = 0; i < tasks.length; i++) {
    listItems.push(<li key={i}>{tasks[i]}</li>);
  }
  
  return <ul>{listItems}</ul>;
}