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    lt label for  test  gt Test lt  label gt   lt input type  text  id  test    gt    However  this produces HTML missing the required  and standard  for attribute    lt label gt Test lt  label gt   lt input type  text  id  test  gt    What am I doing wrong

User · Answer

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

User · Answer

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

User · Answer

That is htmlFor in JSX and class is className in JSX

User · Answer

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

User · Answer

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

User · Answer

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

[reactjs] React ignores 'for' attribute of the label element

Examples related to reactjs

Examples related to label