Bind React jqxgrid with componentdidmount

I have a grid that fetches the data from the server but after getting the data my grid is empty; would you please help me find the problem?

This is my code:

import * as React from‘ react’;
import JqxGrid, {
  IGridP `enter code here`
  rops,
  jqx
} from‘ jqwidgets - scripts / jqwidgets - react - tsx / jqxgrid’;
import“ jqwidgets - s `enter code here`
cripts / jqwidgets / styles / jqx.base.css”;
import“ jqwidgets - scripts / jqwidgets / styles / jqx.material.css”;
import {
  getcourseList
} from‘.. / data - access / Course’
class GridCourse extends React.PureComponent {
  constructor(props) {
    super(props);
    const source = {
      datafields: [{
          name: ‘Tabageh’,
          type: ‘string’
        },
        {
          name: ‘Univ’,
          type: ‘string’
        },
        {
          name: ‘SexGroup’,
          type: ‘string’
        },
        {
          name: ‘CorseStatus’,
          type: ‘string’
        },
        {
          name: ‘CorseCode’,
          type: ‘string’
        },
        {
          name: ‘CorseName’,
          type: ‘string’
        },

      ],
      datatype: ‘json’,
      localdata: [],

    };
    this.state = {
      columns: [{
          text: ‘CompanyName’,
          datafield: ‘Tabageh’,
          width: 250
        },
        {
          text: ‘ContactName’,
          datafield: ‘Univ’,
          width: 150
        },
        {
          text: ‘SexGroup’,
          datafield: ‘SexGroup’,
          width: 150
        },
        {
          text: ‘CorseStatus’,
          datafield: ‘CorseStatus’,
          width: 150
        },
        {
          text: ‘CorseCode’,
          datafield: ‘CorseCode’,
          width: 150
        },
        {
          text: ‘CorseName’,
          datafield: ‘CorseName’,
          width: 150
        },

      ],

      source: new jqx.dataAdapter(source)
    }

  }

  componentDidMount() {
    getcourseList().then(data =>
      this.state.source.localdata = data
    )

  }

  render() {

    return (
      <JqxGrid width=’90%’ source={this.state.source} columns={this.state.columns} columnsresize={true} />
    );
  }
}
export default GridCourse;

and this is my getcourseList function in another js file:

export async function getcourseList() {
  const res = await fetch(‘Corse’);
  const data = await res.json();
  return data
}

This topic was modified 19 mi