React Native Sqlite fetch all data in Listview

Question

I am using this library: https://github.com/andpor/react-native-sqlite-storage for my react native project.

I retrieve single row from database like this:

db.transaction((tx) => {
        tx.executeSql('SELECT * FROM user where id = 1', [], (tx, results) => {
            console.log("Query completed");

            var len = results.rows.length;
           if (len > 0) {
                let row = results.rows.item(0);
                this.setState({userName: row.name});
            }
        });
    });


return (
        <View>
            <Text>{this.state.userName}</Text>
        </View>
    )

But now i want to fetch all data from database, tell me what wrong i am doing in below code:

 db.transaction((tx) => {
        tx.executeSql('SELECT * FROM user', [], (tx, results) => {
            console.log("Query completed");

            var len = results.rows.length;
           for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState({record: row.name});
            }
        });
    });




return (
            <View>
                <FlatList data={this.state.record}
                          keyExtractor={(x,i) => 1}
                          renderItem={ ({item}) =>
                              <ListItem><Text>{item.name}</Text></ListItem>
                          }
                />
            </View>
        )

can anyone guide me how can i show database data in listview.

bennygenel · Accepted Answer · 2018-03-12 12:19:07Z

1

Your state value for FlatList data should be an array and you are setting it to a single string every time you itterate through.

Try changing it like below

this.setState((prevState) => ({ record : prevState.record.push(row.name)}))

PS: you need to set your initial state value for record as an empty array or so.

answered Mar 12, 2018 at 12:19

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DIGITAL JEDI Over a year ago

what is prevState?

DIGITAL JEDI Over a year ago

Kindly elaborate a bit

bennygenel Over a year ago

More info can be found in react's component docs

DIGITAL JEDI Over a year ago

Any working example for react native sqlite data retrieval in list ?

shira Over a year ago

bennygenel - can u help me please with sqlite ? i have the insert fetch and delete functions but for some unclear reason it doesn't work .

DIGITAL JEDI · Accepted Answer · 2018-03-13 05:29:16Z

0

It works like this

record = this.state.record.slice()
                record.push(row.name)
                this.setState({ record: record })

answered Mar 13, 2018 at 5:29

DIGITAL JEDI

1,6663 gold badges29 silver badges54 bronze badges

Collectives™ on Stack Overflow

React Native Sqlite fetch all data in Listview

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related