React ignores 'for' attribute of the label element

Question

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 use

Answer 1

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

Answer 2

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.

Answer 3

That is htmlFor in JSX and class is className in JSX

Answer 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

Answer 5

just using react htmlFor to replace for!

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

Answer 6

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.