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

Предположим, что ваш компонент 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>
)

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.