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

This warning appears because you passed a prop on a component that it is not valid.

For example, this

<Component someUnknowprop='random-text' />

will trigger the warning. 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 3

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 4

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%')};