Datatable did not show dynamic data which i fetch from database in react js

Question

I have integrated datatable in my react js web app.

It works with sample data as i have mentioned in the code pagelist

I have tried to make it component but did not get the result. I am new in react and did not able to clue to further progress.

Here the list of my import packages

import axios from 'axios'
import React, {Component} from 'react'
import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'
import { MDBDataTable} from 'mdbreact';

// The below call get the data as i have confirmed in the console log

axios.get('/api/pagelist').then(response => {

    var pagelist = JSON.stringify(response.data);
    console.log(pagelist);

});

//Sample test data which works with the example

var pagelist = [{
    name: 'Tiger Nixon',
    position: 'System Architect',
    office: 'Edinburgh',
    age: '61',
    date: '2011/04/25',
    salary: '$12320'
},
{
    name: 'Gavin Joyce',
    position: 'Developer',
    office: 'Edinburgh',
    age: '42',
    date: '2010/12/22',
    salary: '$92'
},
{
    name: 'Jennifer Chang',
    position: 'Regional Director',
    office: 'Singapore',
    age: '28',
    date: '2010/11/14',
    salary: '$357'
},
{
    name: 'Donna Snider',
    position: 'Customer Support',
    office: 'New York',
    age: '27',
    date: '2011/01/25',
    salary: '$112'
}
];

// Just copy the function and change columns as guided by the documentation

const DatatablePage = () => {
    const data = {
        columns: [{
            label: 'ID',
            field: 'id',
            sort: 'asc',
            width: 60
            },
            {
                label: 'Name',
                field: 'name',
                sort: 'asc',
                width: 150
            },

            {
                label: 'Title',
                field: 'title',
                sort: 'asc',
                width: 150
            },
            {
                label: 'Slug',
                field: 'slug',
                sort: 'asc',
                width: 100
            },
            {
                label: 'Content',
                field: 'content',
                sort: 'asc',
                width: 250
            },
            {
                label: 'Created',
                field: 'created_at',
                sort: 'asc',
                width: 100
            }
        ],
        rows: pagelist
    };
    return (

        <MDBDataTable striped bordered hover data = {data}/>
    );
}

//Finally exported it

export default DatatablePage;

Answer 1

Looks like a scoping issue to me. The data variable you're storing the page data in is scoped to the axios callback. Once the code leaves that callback, your data is no longer accessible.

axios.get('/api/pagelist').then(response => {

    // pageList scoped locally.  not accessible outside.  this is why the
    // console.log works, but there's no data in the table.
    var pagelist = JSON.stringify(response.data);  
    console.log(pagelist);

});

Assuming you're using a component, I suggest adding a constructor and that you create a state property. E.g.

constructor(props) {
    super(props);

    this.state = {pageList: []} ;

}

You need to then update this in the axios.get....

axios.get('/api/pagelist').then(response => {

    // The below line may not be exactly correct.  May need to review.
    this.setState({pagelist: JSON.stringify(response.data)}, console.log("state updated));

});

Finally, the rows assignment in the datatables method needs to be

rows: this.state.pagelist