React-js ignores label's 'for' attribute

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)

You must use htmlFor attribute instead

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

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.