Вставка значений переменных и констант в JSX

Пусть у нас есть следующий код:

function App() {
	const str = 'text';
	
	return <div>
		text
	</div>;
}

Давайте сделаем так, чтобы в текст дива вставилось значение константы str. Для этого нашу константу нужно написать в фигурных скобках внутри, вот так:

function App() {
	const str = 'text';
	
	return <div>
		{str}
	</div>;
}

Дан следующий код:

function App() {
	const str1 = 'text1';
	const str2 = 'text1';
	
	return <div>
		<p></p>
		<p></p>
	</div>;
}

Вставьте первую константу в первый абзац, а вторую константу - во второй.

Нюансы

Кроме вставки константы в теге может быть еще какой-нибудь текст:

function App() {
	const str = 'text';
	
	return <div>
		eee {str} bbb
	</div>;
}

В один тег можно вставлять сколько угодно констант:

function App() {
	const str1 = 'text1';
	const str2 = 'text2';
	
	return <div>
		{str1} {str2}
	</div>;
}

Вставки констант также могут разделяться каким-либо текстом:

function App() {
	const str1 = 'text1';
	const str2 = 'text2';
	
	return <div>
		{str1} eee {str2}
	</div>;
}

Дан следующий код:

function App() {
	const name = 'user';
	const age  = '30';
	
	return <div>
		name: ?
		age:  ?
	</div>;
}

Вставьте константу с именем вместо первого знака ?, а константу с возрастом - вместо второго.

Выполнение JavaScript

Внутри фигурных скобок можно не только вставлять переменные и константы, но и выполнять произвольный JavaScript код. Давайте, к примеру, в момент вставки найдем сумму двух констант:

function App() {
	const num1 = 1;
	const num2 = 2;
	
	return <div>
		{num1 + num2}
	</div>;
}

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

function App() {
	const num1 = 3;
	const num2 = 2;
	
	return <div>
		result: {num1 ** num2}
	</div>;
}

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

function App() {
	const name = 'john';
	const surname = 'smit';
	
	return <div>
		result: {name + ' ' + surname}
	</div>;
}

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

function App() {
	const num = 4;
	
	return <div>
		result: {Math.sqrt(num)}
	</div>;
}

Массивы и объекты

Можно выполнять вставку не только примитивов, но также массивов и объектов.

Вот пример с массивом:

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

А вот пример с объектом:

function App() {
	const obj = {a: 1, b: 2, c: 3};
	
	return <div>
		<p>{obj.a}</p>
		<p>{obj.b}</p>
		<p>{obj.c}</p>
	</div>;
}

Дан массив:

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

Сделайте так, чтобы результатом рендеринга был тег ul, в тегах li которого будут стоять элементы массива.

Дан объект:

function App() {
	const obj = {name: 'john', surname: 'smit'};
}

Сделайте так, чтобы результатом рендеринга был следующий код:

<p>
	name:    <span>john</span>, <br>
	surname: <span>smit</span>,
</p>

Для значений имени и фамилии используйте значения элементов объекта.