Когда работаешь с элементами label в React, не можешь использовать стандартный HTML-атрибут for напрямую. Это потому что for — это зарезервированное слово в JavaScript, которое не позволяет использовать его как JSX-проп.
forЕсли попытаешься использовать стандартный HTML-атрибут for в JSX, React не отрендерит его правильно:
<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />
Такой подход создаёт HTML без атрибута for и выбрасывает предупреждение в консоль браузера.
htmlForВ React используй атрибут htmlFor вместо HTML-атрибута for:
<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />
htmlFor — это React-эквивалент HTML-атрибута forhtmlFor должно совпадать с id соответствующего input-элементаhtmlFor создаёт правильную связь между label и его элементом управления формыТакой подход гарантирует, что твои label-элементы правильно привязаны к своим input-элементам, улучшая доступность и пользовательский опыт.
В React JSX атрибут htmlFor используется вместо HTML атрибута for, потому что for — это зарезервированное слово в JavaScript.
Новый — ещё не проверен сообществом
Вы