CODEWITHSUNDEEP
react-native
Italo Rodrigo
Italo Rodrigo

Reputation: 1785

List items from database

I am using SQLite and I can get the items of the database, but I cant write the items on the Text component:

<View style={{flexDirection:'row', flexWrap:'wrap'}}>
{
db.transaction((tx) => {
  var sql = 'SELECT * FROM flor where nomePopular like \'%brom%\''
  tx.executeSql(sql, [], (tx, results) => {

    var len = results.rows.length;
    for (let i = 0; i < 10; i++) {
      let row = results.rows.item(i);
      alert(row.id) //THE ALERT WORK
      {<Text>row.id</Text>} //TEXT NOT WORKS
    }
  });
});
}
</View>

The alert works correctly, but the Text not works :/

Upvotes: 0

Views: 218

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

I don't know much about SQL but i think db.transaction returns a transaction object, which can't be used to render JSX.

Therefore what you need to do is move it to a separate module as

state = {
  rows: [] // Initially an empty array
}

getTransactionResults = () => {
db.transaction((tx) => {
  var sql = 'SELECT * FROM flor where nomePopular like \'%brom%\''
  tx.executeSql(sql, [], (tx, results) => {

    var len = results.rows.length;
    this.setState({rows: results.rows.raw()})
  });
});
}

render () {
  const transaction = this.getTransactionResults() //<== Call here to initiate transaction
  return (
    <View style={{flexDirection:'row', flexWrap:'wrap'}}>
      {
       this.state.rows.map((row) => <Text key={row.id}>{row.id}<Text>)
      }
    </View>
   )
}

Upvotes: 1

Related Questions