'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?
Solution 1:[1]
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.
Solution 2:[2]
Yes, for react,
for becomes htmlFor
class becomes className
etc.
see full list of how HTML attributes are changed here:
Solution 3:[3]
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.
Solution 4:[4]
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
Solution 5:[5]
just using react htmlFor to replace for!
Since
foris a reserved word in JavaScript, React elements usehtmlForinstead.
refs
you can find more info by following the below links.
https://facebook.github.io/react/docs/dom-elements.html#htmlfor
Solution 6:[6]
That is htmlFor in JSX and class is className in JSX
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Brad Turek |
| Solution 3 | Jani Devang |
| Solution 4 | Trident D'Gao |
| Solution 5 | |
| Solution 6 | Daniel Nguyen |