React: Update unknown props warning page

[amsdamsgram]

What is the current behavior?
If I write a JSX component without an upper case, React gives me the unknown prop warning
I finally remember that

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

But I think it could be useful to remind it in the unknown props warning page as a reason of this warning.
I spent some time debugging and not understanding this warning in this case. And I might not be the only one!

What is the expected behavior?
Update unknown props warning page and add a reason this warning could be appearing:

1. You are using a JSX component without an upper case. React treats it as an HTML tag and probably doesn't recognize its props. React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

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

Let me know if you think it could be useful or it's just me who hasn't been enough careful!

[gaearon]

Would you like to submit a PR to the doc page?

[amsdamsgram]

Sure

[bennick]

I understand the reasoning behind the props warning but what is the recommended way to apply non standard but valid html attributes that are not on the whitelist?

For example take this component that simply wants to render a video via an iframe

const VideoPlayer = ({ id }) => {
  return (
    <iframe src={`https://player.vimeo.com/video/${id}`} allowFullScreen webkitallowfullscreen mozallowfullscreen />
  )
}

Out of the 3 attributes (allowFullScreen, webkitallowfullscreen, mozallowfullscreen) only allowFullScreen is on the whitelist.

While webkitallowfullscreen and mozallowfullscreen are depreciated providers like Vimeo still have you use them.

What is the recommended way to use them without getting this warning? I have used dangerouslySetInnerHTML in order to avoid the warning but I am not a fan of this approach.

Whatever the answer perhaps this could be included in the docs. Cheers.

[podrivo]

@bennick same thing here

[bennick]

@podrivo Yea I ended up using dangerouslySetInnerHTML 😞

[daviddelusenet]

+1

[gaearon]

The page has been updated. I’m not sure what +1 refers to but I’ll close this.

What @bennick is asking is tracked in https://github.com/facebook/react/issues/140. And I think we fixed this in master.

[podrivo]

@gaearon +1 means "my thoughts exactly" or "me too". ref

[gaearon]

I understand. +1’s are usually completely useless on the issues because they just spam the notifications for everyone but don’t give any valuable insight or new information. If you wish to “+1” an issue you can do so by using emoji “reactions” on GitHub that are available on every post.

In my comment, I meant that I don’t understand what is here to +1. The problem reported in this issue (docs not mentioning something) has already been fixed.

[gaearon]

To clarify, all of the above attributes work in React 16:

const VideoPlayer = ({ id }) => {
  return (
    <iframe
      src={`https://player.vimeo.com/video/${id}`}
      allowFullScreen="true"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
    />
  )
}

https://jsfiddle.net/Luktwrdm/

You just need to specify "true" explicitly for them.

This is because different unknown attributes treat booleans in different ways (e.g. "false" can be considered truthy). So we ask you to explicitly specify them as strings.

[bennick]

ah thanks for the clarification @gaearon

[podrivo]

Indeed. Thanks @gaearon!

[rwieruch]

Thank you 🥇