More helpful interaction for "React does not recognize the 'propName' prop on a DOM Element"

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

When you pass a unknown prop to a DOM element - common when you pass {...props} to something that turns out to be a div/span/any other DOM element rather than a composite component - you get a warning like so:

Warning: React does not recognize the `propName` prop on a DOM element. ....

If the tree is pretty complicated, especially if you’re using HOCs, it can be very hard to find where this prop has been passed and to which DOM element.

What is the expected behavior?

We had a quick muck around with react-dom and logging the DOM element that triggers this warning allows you to see the element in the DOM and makes it much easier to work out where the prop is being accidentally passed. You can even use the react dev tools to work out exactly which line the component is defined in the code.

Simply logging the element is obviously not the most elegant way of showing the user where the mistake is, but would it be possible to do something in order to make it quicker to fix mistaken prop passing like this?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All.

[gpawlik]

Does anybody know why are those warnings displayed with console.error instead of console.warn?

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!