Предположим, что ваш компонент React выводит какой-то список <ul>
, а элементы этого списка <li>
формируются из массива items
.
Рекомендую также вам мой видеокурс по JavaScript и React.
Для начала в возвращаемом JSX-коде добавляем вывод тега <ul>
.
return ( <ul> </ul> )
А теперь, внутри этого списка, нам надо выполнить JavaScript-код, для этого мы поместим его в фигурные скобки {}
, а внутри этих скобок вызовем метод items.map()
для того, чтобы запустить цикл.
Также в метод map()
мы передаём колбэк-функцию, которая и будет вызываться для каждого элемента списка. Внутри этой функции мы возвращаем элемент <li>
, подставляя в него атрибут key
и текст внутри, которые мы и получаем непосредственно из массива.
return ( <ul> {items.map((value, index) => { return <li key={index}>{value}</li> })} </ul> )
Также эту запись можно слегка укоротить.
return ( <ul> {items.map((value, index) => <li key={index}>{value}</li>} </ul> )
Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.