Chartjs-Array data not rendering in data table using this.props – ReactJS

by

1👍

✅

I suspect it is because jquery operates outside of react and your child component only sets the table when it mounts. When the parent sets state with data the child sees the prop update and rerenders <p>{this.props.data}</p>, but the <table /> does not get its data updated. If you refactor the jquery logic into utility functions and call the set data table in componentDidMount and update table in componentDidUpdate props update, you can take advantage of the component lifecycle functions to get the <table /> data updated.

Using this Link this is an example of how your DataTable could be updated.

setDataTable = () => {
  this.$el = $(this.el);
  this.$el.DataTable({
    data: this.props.data,
    columns: [
      { title: "heading" },
      { title: "heading" },
      { title: "heading " },
      { title: "heading " },
      { title: " heading" },
    ]
  });
}

updateDataTable = () => {
  const table = $(this.el).DataTable();

  // logic to update table with updated data
  table.clear();
  table.rows.add(this.props.data);
  table.draw();
};

componentDidMount() {
  console.log(this.el);
  this.setDataTable();
}

componentDidUpdate(prevProps) {
  console.log(this.el);
  if (prevProps.data !== this.props.data) {
    this.updateDataTable();
  }
}

Question Why not use a more react way of rendering your data? Something like MUI-Datatables?

Leave a comment