React-js ignores label's 'for' attribute

Question

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

The following:

Answer 1

You must use htmlFor attribute instead

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

Answer 2

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.