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

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

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

return <div id={str}>
text
</div>;
}
Результатом работы этого кода будет следующее:

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

Исключения
Напоминаю, что вместо атрибута 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>;
}