CODEWITHSUNDEEP
reactjslabel
goofballLogic
goofballLogic

Reputation: 40549

React ignores 'for' attribute of the label element

In React (Facebook's framework), I need to render a label element bound to a text input using the standard for attribute.

e.g. the following JSX is used:

<label for="test">Test</label>
<input type="text" id="test" />

However, this produces HTML missing the required (and standard) for attribute:

<label>Test</label>
<input type="text" id="test">

What am I doing wrong?

Upvotes: 445

Views: 299798

Answers (6)

xgqfrms
xgqfrms

Reputation: 12206

just using react htmlFor to replace for!

Since for is a reserved keyword in JavaScript, React elements use htmlFor instead.

refs

you can find more info by following the below links.

https://facebook.github.io/react/docs/dom-elements.html#htmlfor

https://github.com/facebook/react/issues/8483

https://github.com/facebook/react/issues/1819

Upvotes: 16

Derrick
Derrick

Reputation: 1606

Yes, for react,

for becomes htmlFor

class becomes className

etc.

see full list of how HTML attributes are changed here:

https://facebook.github.io/react/docs/dom-elements.html

Upvotes: 86

Trident D&#39;Gao
Trident D&#39;Gao

Reputation: 19762

both for and class are reserved words in JavaScript this is why when it comes to HTML attributes in JSX you need to use something else, React team decided to use htmlFor and className respectively

Upvotes: 12

Daniel Nguyen
Daniel Nguyen

Reputation: 137

That is htmlFor in JSX and class is className in JSX

Upvotes: 3

Jani Devang
Jani Devang

Reputation: 1109

For React you must use it's per-define keywords to define html attributes.

class -> className

is used and

for -> htmlFor

is used, as react is case sensitive make sure you must follow small and capital as required.

Upvotes: 23

Sophie Alpert
Sophie Alpert

Reputation: 143204

The for attribute is called htmlFor for consistency with the DOM property API. If you're using the development build of React, you should have seen a warning in your console about this.

Upvotes: 797

Related Questions