Populate React Table with firebase realtime database data - reactjs

Question

I want to populate my table which i build using react library (react-table-6) with firebase data (using realtime database). I am getting values in console but not being able to put in table, each value in its own field. Values are rendering but i know im doing some silly mistake here.
See this image to see screen
Can anybody explain what im doing wrong here,
Below dropping function through which im retrieving values..
State:
this.state = {
data: [ {trainerName: '', CourseName: '', evidence: '', comment: ''}
]}
function:
get_course_list(){
return firebase.database().ref('Users/CourseApprovals/').on('value', (snapshot) => {
var data = [];
snapshot.forEach((childSnapshot) => {
var childData= childSnapshot.val();
var child1 = childData.comments;
var child2 = childData.evidence;
var child3 = childData.selectedTrainer.label;
var child4 = childData.selectedTrainer.value;
var CompleteData = {child1, child2, child3, child4};
data.push({
data: CompleteData
});
})
this.setState({
data
}, console.log(data))
})
}
componentDidMount(){
this.get_course_list();
}
And in render,
<ReactTable
data={data}
columns={[
{ Header: "SL No", maxWidth: 100,filterable: false, Cell: props => {
return <div>{props.index + 1}</div>;
}},
{ Header: "Trainer Name", accessor: "trainerName", className: "sticky", headerClassName: "sticky" },
{ Header: 'Course Name', accessor: 'CourseName'},
{ Header: "Evidence", accessor: "evidence" },
{ Header: 'Comments', accessor: 'comment'},
]}
defaultPageSize={10}
className="-striped -highlight"
/>

Answer 1

The problem may be in pushing data twice into the data array. Try this:
get_course_list() {
let data = [];
firebase.database().ref('Users/CourseApprovals').on('value', snapshot => {
if (snapshot.exists()) {
// making sure data exists
snapshot.forEach(child => {
let a = child.val();
// build the object
let CompleteData = {
child1: a.comments,
child2: a.evidence,
child3: a.selectedTrainer.label,
child4: a.selectedTrainer.value
}
// you are currently doing: data.push({ data: CompleteData })
// by doing so your data array looks like this:
// data:[{ data: { child1: '', ... } }, ...]
data.push(CompleteData)
// now your array should look like this:
// data:[{ child1: '', ... }, ...]
});
// setState
this.setState({ data });
console.log(data);
}
})
}
componentDidMount() {
this.get_course_list();
}