Reputation: 40549
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
Reputation: 12206
htmlFor
to replace for
!Since
for
is a reserved keyword in JavaScript, React elements usehtmlFor
instead.
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
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
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
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
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