Теги в массивах JSX

Пусть у нас в массиве хранятся теги:

function App() {
	const arr = [<p>1</p>, <p>2</p>, <p>3</p>];
}

Мы можем выполнить вставку содержимого нашей переменной с помощью фигурных скобок:

function App() {
	const arr = [<p>1</p>, <p>2</p>, <p>3</p>];
	
	return <div>
		{arr}
	</div>;
}

В результате теги из массива вставятся в указанное место и после рендеринга получится следующий код:

<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Дан массив:

function App() {
	const arr = [
		<li>1</li>,
		<li>2</li>,
		<li>3</li>,
		<li>4</li>,
		<li>5</li>,
	];
}

С помощью этого массива получите результатом рендеринга следующий код:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>