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

You are getting this error because you are component is rendering before the data is updated — Goskula Jayachandra, May 01 '20 at 06:24
So according to you what changes should I make for getting proper output? @user12129132 — developer_user, May 01 '20 at 06:25
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) — Goskula Jayachandra, May 01 '20 at 06:30
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 — developer_user, May 01 '20 at 06:44
It is data:[] but in componentDidMount() I declared const data1=[] and then in this.setState I am assigning data to data1 — developer_user, May 01 '20 at 06:46
Made some changes try with this thing check are you getting any errors — Goskula Jayachandra, May 01 '20 at 07:07

score 2 · Accepted Answer · edited Nov 15 '21 at 11:15

2

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

edited Nov 15 '21 at 11:15

Suraj Rao

29,388
11
94
103

answered May 01 '20 at 06:46

Goskula Jayachandra

3,931
2
12
22

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 May 01 '20 at 07:15
After modifying this code it showing error as : Text string must be rendered within a componet – developer_user May 01 '20 at 07:28
{this.state.data[0].email} 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 May 01 '20 at 07:39
But why only first entry of database is printing ? – developer_user May 01 '20 at 07:42
Yes, I got that, but when I do {this.state.data.email} then blank space appears on screen – developer_user May 01 '20 at 07:46
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 May 01 '20 at 08:01
Made some changes to my answer you can do it like this, hope this helps! – Goskula Jayachandra May 01 '20 at 08:04
Thanks alot for helping and solving my error :) It works – developer_user May 01 '20 at 08:12
Iam glad that it helped you – Goskula Jayachandra May 01 '20 at 08:21

score 1 · Answer 2 · edited Nov 15 '21 at 11:12

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

Milind Agrawal · Answer 3 · 2020-05-01T08:22:38.610

Your(s) only issues was, uses of data: [] in state instead of data1: []. However I found few more enhancements in your code and below is my suggestions

Issues:

1) data1 being used at render but not initialised in state

2) styles object is used as string instead of object

3) Not an issue, but you don't need to bind _submit as it's already an arrow function

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import ReactTable from 'react-table';
import firebase from 'firebase';

const firebaseConfig = {};
firebase.initializeApp(firebaseConfig);

const COLUMNS = [
  {
    Header: 'email',
    accessor: 'email',
  },
  {
    Header: 'password',
    accessor: 'password',
  },
];

export default class Form1 extends Component {
  state = {
    data: [],
    columns: COLUMNS,
  };

  componentDidMount() {
    const data = [];
    const query = firebase.database().ref('/users');

    query.once('value').then(snapshot => {
      snapshot.forEach((childSnapshot, index) => {
        const singleObj = {
          email: childSnapshot.val().email,
          password: childSnapshot.val().password,
        };

        data.push(singleObj);
        this.setState({ data });
      });
    });
  }

  _submit = () => {
    console.log('data1:', this.state.data);
  }

  render() {
    const { data, columns } = this.state;

    return (
      <View style={styles.container}>
        {data.length > 0 && <ReactTable data={data} columns={columns} />}
        <Button title="Submit" onPress={this._submit} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 },
});

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 — developer_user, May 01 '20 at 08:18
@VibhutiBheda I do not see any issue in above code. Mind sharing how you are using it or importing it? — Milind Agrawal, May 01 '20 at 08:23
Thanks for helping, my error got solved earlier. :) Thanks alot @Milind Agrawal — developer_user, May 01 '20 at 10:15

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

3 Answers3

Linked