Вставка переменных и констант в атрибуты тегов в JSX

Вставку переменных и констант можно делать не только в тексты тегов, но и в атрибуты. При этом кавычки от атрибутов не ставятся:

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

Результатом работы этого кода будет следующее:

<div id="elem">
	text
</div>

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

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

Вставьте значение константы attr в атрибут id нашего дива.

Исключения

Напоминаю, что вместо атрибута class следует писать атрибут className:

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

А вместо атрибута for следует писать атрибут htmlFor:

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

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

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

Вставьте значение константы attr в атрибут class нашего дива.

Автор следующего кода хотел добавить классы элементам:

function App() {
	const class1 = 'block1';
	const class2 = 'block2';
	
	return <div>
		<p class={class1}>text</p>
		<p class={class2}>text</p>
	</div>;
}

Код, однако, не работает. Исправьте ошибку автора кода.

Некий программист написал следующий код:

function App() {
	const str1 = 'label';
	const str2 = 'block';
	const str3 = 'elem';
	
	return <div>
		<label id={str1} for={str2} class={str3}>text</label> <br>
		<input id={str2}>
	</div>;
}

Код не работает. Исправьте ошибки автора кода.