Populate React Table with firebase realtime database data

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();
}