ReactNative - Objects are not valid as React child

Question

I am getting this error -

"Objects are not valid as a React child (found: object with keys {$$typeof , type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead"

This is specifically running the Android Emulator.

Here's my code:

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userEmail: null
    }
    //this.authCheck = this.authCheck.bind(this)
    //this.toggleLogin = this.toggleLogin.bind(this)
    this.signIn = this.signIn.bind(this)
  }

  componentDidMount() {
    this.authListener()
  }

  authListener() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log(user.email)
        this.setState({userEmail: user.email})

      } else {
        console.log('no user signed in')
        this.setState({userEmail: null})
      }
      })
  }

  signIn(email, password) {
    //console.log(email, password)
    //console.log(this.state.userEmail)
    firebase.auth().signInWithEmailAndPassword(email, password)
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage)
        // ...
      })
  }

  signUp(email, password) {
    firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode, errorMessage)
      // ...
    })
  }

  logOut() {
    firebase.auth().signOut()
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.userEmail ? <ItWorked logOut={this.logOut}/> : <SignUp signIn={this.signIn} signUp={this.signUp} toggleLogin={this.toggleLogin}/>}
      </View>
    );
  }
}

It's difficult to say what might be wrong without seeing how ItWorked and SignUp are implemented, since that's all that is rendered. — Tholle

Elliot Plant Elliot Plant · Accepted Answer · 2019-03-11T21:16:50

If your code is exactly as you wrote it, then ItWorked and SignUp should be undefined, which would give you an error if you try to use them in the render method.

If you did import those two components, then you might not be importing and exporting them correctly. If this is the case, you might have done something like:

// App.js

// Note that this import expects SignUp to be the default export of SignUp.js
import SignUp from './components/SignUp.js' 

export default class App extends Component {
 ...


// SignUp.js

// Note that this is a named export of SignUp
export function SignUp() {
  return <div>Lorem Ipsum</div>
}

To solve this, either export SignUp as the default:

// SignUp.js

export default function SignUp() {
  return <div>Lorem Ipsum</div>
}

OR import SignUp as a named import:

// App.js

import { SignUp } from './components/SignUp.js'
...

But not both.

Another possible issue is that the rendered components ( ItWorked and SignUp) are wrapped in higher order components (like react-redux's connect), but the exporting file does not actually call the HOC.

I suspect you might find that one (or both) of those files does something like this:

// SignUp.js

function SignUp(props) {
  return <div>Lorum Ipsum</div>
}

// Possible current export
export default connect(mapStateToProps)

// "Correct" export
export default connect(mapStateToProps)(SignUp)

Either way, the problem probably lies in the SignUp and ItWorks components or how they are imported by App, and it would help to get a bit more context into those components.

ReactNative - Objects are not valid as React child

1 Answers