415

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?

Sophie Alpert
  • 139,698
  • 36
  • 220
  • 238
goofballLogic
  • 37,883
  • 8
  • 44
  • 62

6 Answers6

757

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.

Sophie Alpert
  • 139,698
  • 36
  • 220
  • 238
  • 7
    Thanks Ben. Could you explain "for consistency with the DOM API" for me? – goofballLogic Apr 01 '14 at 17:01
  • 26
    If you have a `label` element (as returned by `document.createElement`, `document.getElementById`, etc) you'd access its `for` property as `label.htmlFor`. – Sophie Alpert Apr 01 '14 at 17:17
  • In React, is there any way to link a label to an input without id? If I use ID and re-use a component, it ends up for the page having multiple inputs with the same id. – Meglio Feb 23 '15 at 12:21
  • 3
    @Meglio In HTML you need a ID for the for attribute to work. To make your component reusable you could add a name property to your component that you set as ID and as name attribute on the actual input field. – Wim Mostmans Feb 23 '15 at 12:53
  • @WimMostmans what if I don't have a unique name property? What is a safe way to generate unique IDs? Maybe a class variable that gets incremented each time it's used? Can't I just ask React for the ID of the current component? It surely has one. – Tobia May 02 '15 at 22:00
  • 2
    Nevermind, I found the answer [here](https://groups.google.com/d/msg/reactjs/N-gDqH2LEcQ/bjBBTKSAZaYJ). They say to use an ID generator. – Tobia May 02 '15 at 22:16
  • 2
    @BenAlpert Thanks for shedding light on that. I never used to look at the DOM API becuase of jQuery and stuff (please forgive me). But in case anyone else is interested in learning more about that, check out https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement. – alvincrespo Jun 03 '16 at 21:01
  • 1
    @ben unlike what has been stated if `htmlFor` is the react attribute instead of `for` it might not be for consistency matters but because `for` is a reserved word in Javascript (and React uses Javascript to render). At least this is the reason stated by the [https://facebook.github.io/react/docs/dom-elements.html#htmlfor](official documentation) – Ilan Schemoul Jun 30 '17 at 22:59
  • Another difference that should be stated in this correct answer, is the `htmlFor` value has to include the `#` sign along with the ID... Opposed to the html attribute `for`. – Louys Patrice Bessette Nov 16 '19 at 18:19
  • 2
    I wish they named it `forName`, following `className` naming convention – Damien Mar 02 '21 at 15:17
  • The more logical answer which available on official docs :- Since for is a reserved word in JavaScript, React elements use htmlFor instead. Here is the link :-https://reactjs.org/docs/dom-elements.html#htmlfor – Aditya kumar Oct 11 '21 at 15:25
76

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

Brad Turek
  • 2,472
  • 3
  • 30
  • 56
Derrick
  • 1,508
  • 11
  • 8
23

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.

Jani Devang
  • 1,099
  • 12
  • 20
14

just using react htmlFor to replace for!

Since for is a reserved keyword in JavaScript, React elements use htmlFor instead.

refs

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

xgqfrms
  • 10,077
  • 1
  • 69
  • 68
11

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

Trident D'Gao
  • 18,973
  • 19
  • 95
  • 159
  • 1
    That has absolutely nothing to do with that. The JSX transformation could just translate it to 'class' which is also valid for property names. In fact, in Preact, you can use both class and className. – Malte R Jan 27 '20 at 22:32
  • 7
    While React could transform it in JSX, it doesn't. Their docs (as of 25-Mar-2020) state "Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead.": https://reactjs.org/docs/dom-elements.html#htmlfor – nirvdrum Mar 25 '20 at 14:27
  • @MalteR you can tell it to IE8, IE7 and IE6 – Trident D'Gao Jun 17 '20 at 15:26
3

That is htmlFor in JSX and class is className in JSX

Daniel Nguyen
  • 117
  • 7