React: Warning: Unknown DOM property for. Did you mean htmlFor?

[ForbesLindesay]

I get this warning whenever I attempt to use the for property on a <label> element. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label for a description of the for attribute.

[oriSomething]

if you're using JSX you suppose to use htmlFor instead of for

[oriSomething]

you can find about it here in the docs

[ForbesLindesay]

Thanks, I'll update react-jade to fix this

[zpao]

Sorry for the confusion! I hope the docs cleared up our reasoning (I would have linked you to the note in this part of the docs)

[ForbesLindesay]

Cool. That does clear up the reasoning. I'm surprised this applies to JSX as well as the React library. It would also seem simpler to just encourage quoted attributes. My generated code looked like:

React.DOM.label( {"for": "name"}, "name");

which doesn't suffer from the problems that this warning is about.

The other thing I'd mention is that given that it is a warning, I would expect it to still output the "for" attribute, even though it recommends renaming it to htmlFor.

[rodryquintero]

How do I know which react component is using the "unknown" attribute? I am having trouble finding the faulty component/element displaying this warning

[jabhishek]

@rodryqunitero The message means that attribute 'for' is unknown. Use htmlFor instead of for.

[zpao]

I prefer the tried and true "search all my files" since this is a very specific case. Here's how you could do it with grep. You IDE probably also has a "find all in project" feature.

grep -rn 'for=' <path>

[rodryquintero]

Thanks guys for all the tips.

[jafelds]

Thanks - this was helpful. It would be great if the warning showed up with the offending line of code in the console (it comes with a reference to warning.js, which isn't very helpful).

[milesj]

On a side note, why is it htmlFor instead of for?

[rodryquintero]

@milesj, that his how you have to set the attribute when using jsx. Using for will generate a warning/error.

[milesj]

I am aware, but why? Is it because "for" is a language construct? Simply wrap the attribute for in quotes.

[rodryquintero]

@milesj, I wondered the same but I guess the reactjs developers have a good reason to do this :)

[zpao]

Please read the above discussions and links. Our reasoning is covered.

[youngBrain1893]

When I want to pass the property itemId to a children Component as part of it's props, I got the warning in my console:

Unknown DOM property itemId. Did you mean itemID?

It's just a normal property, should I change it to itemID to fix it?

---

I just found out itemId is a HTML property. I have to change it to another Key. Please forgive my ignorance.

[xgqfrms-GitHub]

react htmlFor

https://facebook.github.io/react/docs/dom-elements.html#htmlfor

[AMorgaut]

I find this Error message counter intuitive

Looking at:

Warning: Unknown DOM property for. Did you mean htmlFor?

Any Wev developer new to React (or using this attribute in JSX for the 1st time) will think

WTF! how can the DOM <label> "for" property be Unknown! It's been here for ages !

Looking at the number of projects linking to this issue is a good hint to see what I mean.

A more accurate Error message could be something like

Warning: Unknown JSX property for. Did you mean htmlFor?

This would more rapidly point to the right direction

[jmalangmei93]

if you're using JSX you suppose to use htmlFor instead of for

Thanks this solve the problem