Menu
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)
283
All Supported HTML AttributesAs of React 16, any standard or custom DOM attributes are fully supported. These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above. You may also use custom attributes as long as they're fully lowercase.
Since for is a reserved word in JavaScript, React elements use htmlFor instead.
To add the for attribute to a label element to associate it with a form field in React, we can set the htmlFor attribute for the label. to add the htmlFor attribute to the label element. We set htmlFor to name so it'll be rendered as the label element with the for attribute set to name .
React has no for property for labels. It defined the htmlFor attribute. The reason is, that you are writing HTML code in JSX syntax. JSX is an extension to javascript which executes javascript code.
You must use htmlFor attribute instead
<label htmlFor="recipient-name" className="control-label">Recipient:</label> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
