I'm currently working on populating a SectionList with data retrieved from a SQLite database.
Here is where I begin:
constructor(props) {
super(props);
this.state = {
loading: true,
sectionListData: [
{
title: 'A Bulls',
data: []
},
{
title: 'H Bulls',
data: []
},
{
title: 'C Bulls',
data: []
},
{
title: 'R Bulls',
data: []
}
]
};
}
Upon fetching the data from the database, setting the state to the appropriate location seems to be ineffective.
componentDidMount() {
this.aBulls();
this.cBulls();
this.hBulls();
this.rBulls();
}
All the functions are structured similarly, pulling data from their respective databases:
aBulls() {
db.transaction(
tx => {
//SQL Statement
tx.executeSql("select * from abulls group by reg",
//Arguments
[],
//Success
(tx, { rows: {_array} }) => {
const handlebull = JSON.stringify(_array);
const bulls = JSON.parse(handlebull);
this.setState({sectionListData: [
{
0:
{
data: bulls
}
}
]
});
this.setState({loading: false});
},
//Error
(error) => {console.log(error)}
);
}
)};
While console.log(bulls) provides the expected array of data, console.log(this.state.sectionListData[0].data) outputs 'undefined'. I am facing difficulty updating the index for the nested array within the SectionList.