react-native - Suggestion for fetch the data in database and set progress bar

Question

I have already stored the student id and number of books read in the database. now, I have implemented the method to get the details of books count read by the students. but the function progressbardata() doesn't return the data fetched from query. I have tried to assign a value manually inside the db.transaction() and returned it but no luck.

Could you please let me know where i am doing wrong. also this method looping multiple times. how can we sort this out.

import * as Progress from 'react-native-progress';
import { openDatabase } from 'react-native-sqlite-storage';
var db = openDatabase({ name: 'UserDatabase.db' });
let progressbardata = (id) => {
    var totalItems=0;
    db.transaction((tx) => {
      tx.executeSql('SELECT * FROM student where id = ?', [id], (tx, results) => {
          totalItems = results.rows.item(0).percent;
          return (totalItems);
      })
    })
}
const _renderContent = (item, index) => {
return (
<View>
   <Progress.Bar color='#68FF33' progress={progressbardata(item.id)}/>
   </View>
)
}

Answer 1

My guess would be that the request to fetch the data is asynchronous and this code does not seem to wait for a response to continue. Therefor the code would continue while the fetch requests has not returned a value yet. If this is the case, I would suggest that you let the request set the State of the component, and make the state the input of the Progress.Bar component. This way, when the fetch requests finishes asynchronously, the state will be set and the progress bar will be updated. This would look something like this:

import * as Progress from 'react-native-progress';
import { openDatabase } from 'react-native-sqlite-storage';
import { useState } from 'react'
var db = openDatabase({ name: 'UserDatabase.db' });

const renderContent = (props) => {

    [progress, setProgress] = useState(0)

    let progressbardata = (id) => {
            var totalItems=0;
            db.transaction((tx) => {
                  tx.executeSql('SELECT * FROM student where id = ?', [id], (tx, results) => {
                  totalItems = results.rows.item(0).percent;
                  setProgress(totalItems);
              })
            })
        }

    progressbardata(props.id)

    return (
    <View>
       <Progress.Bar color='#68FF33' progress={progress}/>
       </View>
    )
}