TypeError: undefined is not an object (evaluating..)
33,394
Solution 1
Change your code something like this:
import React, { Component } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
export default class Form1 extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
tableHead: ['Emails', 'Password'],
tableData1:[],
}
}
componentDidMount() {
var query = firebase.database().ref("/users");
query.once("value").then((snapshot) => {
snapshot.forEach((childSnapshot, index) => {
let singleObj = {
email: childSnapshot.val().email,
password: childSnapshot.val().password,
}
this.state.data.push(singleObj);
this.setState({data: this.state.data});
console.log('sssssssssssssssssss',this.state.data)
});
for (var i = 0; i < this.state.data.length; i++) {
this.state.tableData1[i] = [this.state.data[i].email, this.state.data[i].password];
this.setState({ tableData1: this.state.tableData1 });
}
});
}
submit1=()=>{
console.log(this.state.data.length)
console.log('data1:',this.state.data)
}
render() {
return (
<View style={{flex:1,marginTop:100}}>
{this.state.data.length > 0 &&
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
<Row data={this.state.tableHead} />
<Rows data={this.state.tableData1} />
</Table>}
<Button title='Submit' onPress={this.submit1.bind(this)} />
</View>
);
}
}
Solution 2
First Import the below line
import { initializeApp, getApps } from 'firebase/app';
// your config from firebase
const firebaseConfig = {
apiKey: "AIzaSy****************************",
authDomain: "i*****dev-a67ad.firebaseapp.com",
projectId: "i*****dev-a67ad",
storageBucket: "i*****dev-a67ad.appspot.com",
messagingSenderId: "1********7930",
appId: "1:1081248747930:web:5a27b7c60397720d0c2a23",
measurementId: "G-KDHB8SLTEZ"
};
// check if app is initialized or not That's it.
if (getApps.length === 0) {
initializeApp(firebaseConfig);
}
Related videos on Youtube
Author by
developer_user
Updated on July 05, 2022Comments
-
developer_user almost 2 years
In console before render() this.state.data1.length is not giving any error but as soon as I use it in view tag this is giving error as : TypeError: undefined is not an object (evaluating '_this.state.data1.length') If I delete this line from view tag then nothing is printed in my reacttable tag and hence I suppose this line is required but what change should I make so that there's no error using react native code and my retrieved data is also printed on my app.
import React, { Component } from 'react'; import { StyleSheet, View, Text, Button } from 'react-native'; import ReactTable from 'react-table'; import firebase from 'firebase'; const firebaseConfig = { ... }; firebase.initializeApp(firebaseConfig); export default class Form1 extends Component { constructor(props) { super(props); this.state = { data: [], columns: [ { Header: "email", accessor: "email" }, { Header: "password", accessor: "password" } ] } } componentDidMount() { const data = []; const data1 = []; var query = firebase.database().ref("/users"); query.once("value").then((snapshot) => { //console.log(snapshot) snapshot.forEach((childSnapshot, index) => { let singleObj = { email: childSnapshot.val().email, password: childSnapshot.val().password, } // console.log('email:',data) data.push(singleObj); this.setState({data1 : data}); console.log('sssssssssssssssssss',this.state.data1) }); }); } submit1=()=>{ console.log(this.state.data1.length) console.log('data1:',this.state.data1) } render() { return ( <View style="styles.container"> {this.state.data1.length > 0 && <ReactTable data={this.state.data1} columns={this.state.columns} />} <Button title='Submit' onPress={this.submit1.bind(this)} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, head: { height: 40, backgroundColor: '#f1f8ff' }, text: { margin: 6 } });
-
Goskula Jayachandra about 4 yearsYou are getting this error because you are component is rendering before the data is updated
-
developer_user about 4 yearsSo according to you what changes should I make for getting proper output? @user12129132
-
Goskula Jayachandra about 4 yearsYou had not declared any state data1 change this to this.state.data.length are you getting the correct data in here console.log('sssssssssssssssssss',this.state.data1)
-
developer_user about 4 yearsYes, in console.log('ssssssssssssssssss',this.state.data1) is giving me proper output. Only it is giving error when it is used inside view tag @user12129132
-
Goskula Jayachandra about 4 yearsthis.state = { data: [], is it data1 or data
-
developer_user about 4 yearsIt is data:[] but in componentDidMount() I declared const data1=[] and then in this.setState I am assigning data to data1
-
Goskula Jayachandra about 4 yearsYou are doing it wrong will post a answer check it once
-
developer_user about 4 yearsYes please modify my code :)
-
Goskula Jayachandra about 4 yearsMade some changes try with this thing check are you getting any errors
-
-
developer_user about 4 yearsyes still it is showing error ! But error is different. Error is : Error: element type is invalid expected a string (for built-in components) or a class/function (for composite elements) but you got undefined. you likely to forgot to export your components from the file it's defined in, or you might have mixed up defaults and named imports
-
developer_user about 4 yearsAfter modifying this code it showing error as : Text string must be rendered within a <Text> componet
-
developer_user about 4 years<Text>{this.state.data[0].email}</Text> this line works but it is showing only first entry's email not the whole entry of database is showing and that also not printing in table format
-
developer_user about 4 yearsBut why only first entry of database is printing ?
-
developer_user about 4 yearsYes, I got that, but when I do <Text>{this.state.data.email}</Text> then blank space appears on screen
-
Goskula Jayachandra about 4 yearsI had made some changes to the code by using Table in it try to do it something like this, you can use react-native-table-component
-
Goskula Jayachandra about 4 yearsMade some changes to my answer you can do it like this, hope this helps!
-
developer_user about 4 yearsThanks alot for helping and solving my error :) It works
-
developer_user about 4 yearsThis code is showing same error as previous code was showing as Error: element type is invalid expected a string (for built-in components) or a class/function (for composite elements) but you got undefined. you likely to forgot to export your components from the file it's defined in, or you might have mixed up defaults and named imports. But previous solutions was giving prefect solution
-
Goskula Jayachandra about 4 yearsIam glad that it helped you
-
Milind Agrawal about 4 years@VibhutiBheda I do not see any issue in above code. Mind sharing how you are using it or importing it?
-
developer_user about 4 yearsThanks for helping, my error got solved earlier. :) Thanks alot @Milind Agrawal