Home » Reactjs » React label element

React label element

Posted by: admin November 29, 2017 Leave a comment

Questions:

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 data-reactid=".1.0.0">Test</label>
<input type="text" id="test" data-reactid=".1.0.1">

What am I doing wrong?

Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *