Menu
I'm new to React Native and I'm getting an error quoted below:
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.
Here's my whole code included in the component file, except styling:
import React, { Component } from 'react'; import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet } from 'react-native'; import firebase from 'firebase'; class LoginForm extends Component { state = { email: '', password: '', error: '', loading: false }; onButtonPress(){ const email = this.state.email; const password = this.state.password; this.setState({error: '', loading: true}); firebase.auth().signInWithEmailAndPassword(email, password) .then(this.onLoginSuccess.bind(this)) .catch(() => { firebase.auth().createUserWithEmailAndPassword(email, password) .then(this.onLoginSuccess.bind(this)) .catch(this.onLoginFail.bind(this)); }); } onLoginSuccess(){ this.setState({email: '', password: '', error: '', loading: false}); } onLoginFail(){ this.setState({error: 'Nie udalo sie utworzyc konta.', loading: false}); } render(){ return( <View style={styles.container}> <View style={styles.imageContainer}> <Image style={styles.image} source={require('../images/loginIcon.png')} /> </View> <View style={styles.formContainer}> <TextInput style={styles.input} placeholder="Email..." placeholderTextColor='rgba(255,255,255,0.9)' underlineColorAndroid='rgba(0,0,0,0)' onChangeText={(email) => this.setState({email: email})} value={this.state.email} autoCorrect={false} /> <TextInput style={styles.input} placeholder="Hasło..." placeholderTextColor='rgba(255,255,255,0.9)' underlineColorAndroid='rgba(0,0,0,0)' autoCorrect={false} onChangeText={(password) => this.setState({password: password})} value={this.state.password} secureTextEntry /> <TouchableOpacity style={styles.buttonContainer}> <Text style={styles.button}> Zaloguj się </Text> </TouchableOpacity> <Text style={styles.error}> {this.state.error} </Text> </View> </View> ); } } I'am quite confused how to fix that issue. Thanks in advance.
974
js error "Objects are not valid as a React child" occurs when we try to directly render an object or an array in our JSX code. To solve the error, use the map() method to render arrays or access properties on the object in your JSX code.
The "Objects are not valid as a React child" error happens when trying to render a collection of data by mistakenly returning the object when applying the map method instead of using the data from the object to create and return JSX.
If you meant to render a collection of children, use an array instead' Error. We can fix the 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead' error by rendering an array with the map method or render objects as strings or render the properties individually.
map() to transform the object into something react can make use of because you cannot directly render an object into React. Instead, by using Array. map() to convert each object in the array into something else, like a string or a component we can then render it.
I had this problem today. I ran a diff on the source code between 5.0.3 and 5.0.4 and found that the exports have changed. I also found that if I change the import statement to the following that it works with the latest version (5.3.0):
import firebase from '@firebase/app' import '@firebase/auth' Doing it this way will allow you to avoid the require in the middle of your code, which is preferred imho.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
