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

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

function App() {
const str = 'text';

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

function App() {
const str = 'text';

return <div>
{str}
</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>;
}

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

function App() {
const num1 = 1;
const num2 = 2;

return <div>
{num1 + num2}
</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>;
}