TypeError: undefined is not an object (evaluating..)

Question

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

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

Comments

[Goskula Jayachandra]

You are getting this error because you are component is rendering before the data is updated

[developer_user]

So according to you what changes should I make for getting proper output? @user12129132

[Goskula Jayachandra]

You 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]

Yes, 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]

this.state = { data: [], is it data1 or data

[developer_user]

It is data:[] but in componentDidMount() I declared const data1=[] and then in this.setState I am assigning data to data1

[Goskula Jayachandra]

You are doing it wrong will post a answer check it once

[developer_user]

Yes please modify my code :)

[Goskula Jayachandra]

Made some changes try with this thing check are you getting any errors

[developer_user]

yes 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]

After modifying this code it showing error as : Text string must be rendered within a <Text> componet

[developer_user]

<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]

But why only first entry of database is printing ?

[developer_user]

Yes, I got that, but when I do <Text>{this.state.data.email}</Text> then blank space appears on screen

[Goskula Jayachandra]

I 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]

Made some changes to my answer you can do it like this, hope this helps!

[developer_user]

Thanks alot for helping and solving my error :) It works

[developer_user]

This 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]

Iam glad that it helped you

[Milind Agrawal]

@VibhutiBheda I do not see any issue in above code. Mind sharing how you are using it or importing it?

[developer_user]

Thanks for helping, my error got solved earlier. :) Thanks alot @Milind Agrawal