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

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