Search code examples
reactjslabel

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

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