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.