В React ты не можешь использовать обычные циклы for прямо внутри JSX. Вместо этого используй метод Array.prototype.map() со стрелочными функциями ES6, чтобы преобразовать массив данных в компоненты.
<tbody>
{items.map(item => (
<SomeComponent
key={item.id}
name={item.name}
/>
))}
</tbody>
Этот подход проходит по массиву items и создаёт компонент для каждого элемента, передавая нужные данные как пропсы.
Обычные циклы for нельзя использовать прямо в JSX, потому что:
for — это операторы и не могут существовать внутри выражений// Это НЕ сработает
<tbody>
for (let i = 0; i < items.length; i++) {
<SomeComponent key={items[i].id} name={items[i].name} />
}
</tbody>
Если map() тебе не подходит, рассмотри эти варианты:
returnНе забывай всегда указывать уникальный проп key при рендеринге списков. Это помогает React понять, какие элементы изменились, что улучшает производительность и предотвращает ошибки рендеринга.
Метод map() работает в JSX, потому что он возвращает массив выражений, которые можно отрендерить, в то время как for циклы — это statements, которые нельзя использовать внутри JSX выражений.
Новый — ещё не проверен сообществом
Вы