CODEWITHSUNDEEP
react-nativereact-native-flatlist
simaAttar
simaAttar

Reputation: 507

FlatList does not show data

My question may seem duplicated, but its not. I'm trying to fetch a table from a local sqlite and show it through a flatlist. but it shows undefined!

Here is the screenshot of output on simulator: https://i.sstatic.net/2y4F3.jpg

Here is my code:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ToastAndroid,
  ListView,
  ActivityIndicator,
  FlatList,
  } from 'react-native';


var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({name: 'test.db', createFromLocation: '~sqliteexample.db'})

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      petname: "",
      owner: "",
      record: []
    };


  db.transaction((tx) => {
    tx.executeSql('SELECT * FROM pet', [], (tx, results) => {
      var len = results.rows.length;
      for (let i = 0; i < len; i++) {
        let row = results.rows.item(i);
        record = this.state.record.slice()
        record.push(row.petname)
        this.setState({ record: record })
}
    });
});

  }

  render() {
    return (
      <View style={styles.container}>
        <Text>SQLite Example</Text>     
        <FlatList 
              data={this.state.record} 
              keyExtractor={((item, index) => "itemNo-" + index)}                            renderItem={({item}) => (
              <View>
                  <View>
                    <Text>{'this owner:  ' + item.owner}</Text>
                  </View>
                  <View>
                    <Text>{'this petmname:    '+ item.petname}</Text>
                </View>
              </View> 
        )
    }
/>
          </View>
    );
  }
}

Please tell me what am I doing wrong? Thanks.

Upvotes: 1

Views: 506

Answers (1)

V&#252;sal
V&#252;sal

Reputation: 2706

I think the problem is in the next line:

record.push(row.petname)

You are pushing a string row.petname and then later you try to retrieve its properties - which is incorrect, as it doesn't have them.

Try to replace the aforementioned line with the next one:

record.push(row)

Also, what is the purpose of .slice() here: record = this.state.record.slice() ?

Upvotes: 2

Related Questions