89

I know that for 'class' we must use className, but how do i get react to preserve 'for' attribute?

The following:

<label for="recipient-name" className="control-label">Recipient:</label>

is rendered as:

<label class="control-label">Recipient:</label>

on an unrelated note, i find it annoying that i can not change attributes using chrome's console when using React. is there a way around that? for example if i inspect the rendered element and add the 'for' attribute manually, it disappears when i click away from that control (presumably because react re-renders the control i'm guessing)

mike01010
  • 5,226
  • 6
  • 44
  • 77
  • 1
    Re unrelated note: That's just how it is. React controls the DOM, not something on the outside. Also have a look at the docs, where it is explained what to use instead of `for`: http://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes – Felix Kling Mar 20 '15 at 07:18
  • 6
    Naturally this is because of reserved words in javascript. `for` is a reserved word and so cannot be used as a json key, which is what the jsx parser is turning your jsx attribute names into. Same reason it's `className` instead of `class`. – Mike Driver Mar 20 '15 at 11:57
  • 1
    possible duplicate of [React label element](http://stackoverflow.com/questions/22752116/react-label-element) – WiredPrairie Mar 20 '15 at 13:02

2 Answers2

178

You must use htmlFor attribute instead

<label htmlFor="recipient-name" className="control-label">Recipient:</label>
zerkms
  • 249,484
  • 69
  • 436
  • 539
7

for is a keyword in javascript so in JSX you can't use it. You must use htmlFor which is translated into for attribute once it is rendered to the DOM.

Ali Rehman
  • 3,731
  • 4
  • 23
  • 28