How to solve Warning: React does not recognize the X prop on a DOM element

Question

I'm using a thing called react-firebase-js to handle firebase auth, but my understanding of react and of the provider-consumer idea is limited.

I started with a built a very big JSX thing all at the top level, and that works without warnings. But when I try to break it into components, I got the warning shown in the title and a few others.

This works without warning...

// in App.js component

  render() {
    return (
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <FirebaseAuthConsumer>
                {({ isSignedIn, user, providerId }) => {
                    if (isSignedIn) {
                        return (
                           // ui for signed in user
                        );  
                    } else {
                        if (this.state.confirmationResult) {
                            return (
                                // ui to get a phone number sign in
                            );
                        } else {                  
                            return (
                                // ui to verify sms code that was sent
                            );
                        }
                    }
                }}
            </FirebaseAuthConsumer>
        </header>
    );
  }

But this, better design, I thought, generates errors/warnings...

// in App.js component
render() {
    return (
      <MuiThemeProvider>
      <FirebaseAuthProvider {...config} firebase={firebase}>
        <div className="App">
          <IfFirebaseAuthed>
            <p>You're authed buddy</p>
            <RaisedButton label="Sign Out" onClick={this.signOutClick} />
          </IfFirebaseAuthed>
          <IfFirebaseUnAuthed>
              <Authenticater />  // <-- this is the new component
        </IfFirebaseUnAuthed>
        </div>
      </FirebaseAuthProvider>
      </MuiThemeProvider>
    );
  }

// in my brand new Authenticator component...

  render() {
    return (
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <FirebaseAuthConsumer>
                {({ isSignedIn, user, providerId }) => {
                    if (isSignedIn) {
                        return (
                        <div>
                            <pre style={{ height: 300, overflow: "auto" }}>
                            {JSON.stringify({ isSignedIn, user, providerId }, null, 2)}
                            </pre>
                        </div>
                        );  
                    } else {
                        if (this.state.confirmationResult) {
                            return (
                                // ui to get a phone number sign in
                            );
                        } else {                  
                            return (
                                // ui to verify an sms code that was sent
                            );
                        }
                    }
                }}
            </FirebaseAuthConsumer>
        </header>
    );
  }

The errors/warnings look like this...

[Error] Warning: React does not recognize the isSignedIn prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase issignedin instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[Error] Warning: React does not recognize the providerId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase providerid instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[Error] Error: Unable to load external reCAPTCHA dependencies! (anonymous function) (0.chunk.js:1216) [Error] Error: The error you provided does not contain a stack trace.

Am I misunderstanding how to use provider-consumers, or is there an error in the react-firebase code, or am I doing some other thing wrong? Thanks.

Answer 1

Presumably, this line must be the culprit:

<FirebaseAuthProvider {...config} firebase={firebase}>

Your config object currently holds fields isSignedIn and providerId, and you must be sending those down to children components, and ultimately to a DOM element. Try removing those fields from the object before you send them down:

const { providerId, isSignedIn, ...authProviderConfig } = config

That way, your object authProviderConfig will not hold the providerId or isSignedIn attributes.

Even better, you can rebuild the configuration object explicitly to avoid any further confusion:

const authProviderConfig = { /* The fields from config FirebaseAuthProvider actually needs */ }

You should also check your FirebaseAuthProvider component to see how it's using those props, and avoid spreading them down to DOM elements.

Related documentation: https://reactjs.org/warnings/unknown-prop.html

Answer 2

Adding $ to the prop name fixed it for me.

.tsx file:

<Wrapper $offset={isOffset}>

And on the .style.tsx file:

height: ${({ $offset }) => ($offset ? 'calc(100% + 20px)' : '100%')};

Answer 3

You passed a prop on a component that it is not valid

For example, this will trigger the warning:

<Component someUnknownProp='random-text' />

In order to get rid of the warning you should find out where that warning is coming from.

The stack trace should give you a hint.

Answer 4

In my case, I was getting this error when using the IfFirebaseAuthed component from react-firebase.

You must make sure that you return a function inside of this component.

I changed this:

<IfFirebaseAuthed>
  ... My authenticated code here ...
</IfFirebaseAuthed>

To this:

<IfFirebaseAuthed>
 {() => (
    ... My authenticated code here ...
 )}
</IfFirebaseAuthed>

And this issue went away.

Answer 5

Check your custom props

In my case, I created a reusable hide component. (Initially, it mounts a button with text masked(******) on clicking this button the key( API key ) will be revealed which is a CopyToClipboard component )

const [hide, setHide] = useState(true);

If hide is true, I am rendering a Button ( spreading all the props )

<Button onClick={() => setHide(false)} {...props}>
     ******
</Button>

When this button is Clicked hide is false and I am rendering a CopyToClipboard component.

<CopyToClipboard
   {...props}
>
  {value}
</CopyToClipboard>

The Problem

1. In the above scenario, I am spreading {...props} to both Button and CopyToClipboard components.
2. But some props of CopyToClipboard are not compatible with that of Button's.

Fix

1. So at the top of the component destructure the props that are specific to a component (here CopyToClipboard).
2. Now safely spread the rest of the props to both the components and pass the new prop separately ( to CopyToClipboard component )

const {onCopy, ...restProps} = props

<Button onClick={() => setHide(false)} {...restProps}>
     ******
</Button>

<CopyToClipboard
   onCopy={onCopy}
   {...restProps}
>
  {value}
</CopyToClipboard>