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 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?

Answer 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.

Answer 2

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