Cant we pass state to reactchart databar:datasets:data?

Question

I am trying to get the data from sqlserver and want to present as bar graph using reactchart.js. I pulled the data from sqlserver and set it to state. Why can't I use the state in the reactchart databar?

I'm getting the following error. I am new to react, what am I missing here.

EditComponent.js:41 Uncaught TypeError: Cannot read property 'executionresults' of undefined

import React from "react";
import { Bar } from "react-chartjs-2";
import axios from "axios";

class ChartsPage extends React.Component {
  constructor(props) {
    super(props);
    //this.props.pass=[];
    //this.props.fail=[];
    this.state = { executionresults: [] };
  }

  componentDidMount() {
    axios
      .get("http://localhost:5000/modulewise")
      .then(response => {
        // console.log(response.data.recordset);
        // console.log(response.data.recordset[0].moduleName);
        // this.setState({ chartlabels: response.data.recordset.moduleName,chartpass: response.data.recordset.PASS,chartfail: response.data.recordset.FAIL });
        this.setState({ executionresults: response.data.recordset });
        // console.log(this.state.executionresults);
        const pass = this.state.executionresults.map(result => result.PASS);
        console.log(
          this.state.executionresults.map(result => result.moduleName)
        );
        console.log(this.state.executionresults.map(result => result.PASS));
        console.log(this.state.executionresults.map(result => result.FAIL));
        console.log(this.props.pass);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  state1 = {
    dataBar: {
      labels: this.state.executionresults.map(result => result.moduleName), //["AccountManagement", "BeneficiaryManagement", "CreditCards", "Incidents_Complaints", "Investments", "IPO", "LeaseTransfer", "QuickPay", "SADAD"],//["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], //this.state.modstate,//
      //this.state.executionresults.map(result=> result.moduleName),//
      datasets: [
        {
          label: "PASS",
          data: [0, 2, 4, 1, 0, 0, 6, 0, 35], //[12, 39, 3, 50, 2, 32, 84], //this.state.passstate,//
          backgroundColor: "Green", //rgba(245, 74, 85, 0.5)
          borderWidth: 1
        },
        {
          label: "FAIL",
          data: [2, 4, 17, 10, 6, 1, 11, 5, 18], //[56, 24, 5, 16, 45, 24, 8], //this.state.failstate,//
          backgroundColor: "orange", //"rgba(90, 173, 246, 0.5)",
          borderWidth: 1
        }
      ]
    },
    barChartOptions: {
      responsive: true,
      maintainAspectRatio: true,
      scales: {
        xAxes: [
          {
            barPercentage: 1,
            gridLines: {
              display: true,
              color: "rgba(0, 0, 0, 0.1)"
            }
          }
        ],
        yAxes: [
          {
            gridLines: {
              display: true,
              color: "rgba(0, 0, 0, 0.1)"
            },
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    }
  };

  render() {
    return (
      <div>
        <Bar data={this.state1.dataBar} options={this.state1.barChartOptions} />
      </div>
    );
  }
}

export default ChartsPage;

Answer 1

The problem is that the this in state1 references state1 object but not the component instance!

To pass the correct data you could modify in on the fly using .map method of the array. I think you don't need state1 at all. Adding const data in the render method is ok as you could prepare the data needed before passing it to the <Bar /> component.

render() {
    const data = {
        dataBar: {
            labels: this.state.executionresults.map(result => result.moduleName), 
            datasets: [
                {
                    label: "PASS",
                    data: [0, 2, 4, 1, 0, 0, 6, 0, 35], 
                    backgroundColor: "Green", 
                    borderWidth: 1
                },
                {
                    label: "FAIL",
                    data: [2, 4, 17, 10, 6, 1, 11, 5, 18], 
                    backgroundColor: "orange",
                    borderWidth: 1
                }
            ]
        },
        barChartOptions: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                xAxes: [
                    {
                        barPercentage: 1,
                        gridLines: {
                            display: true,
                            color: "rgba(0, 0, 0, 0.1)"
                        }
                    }
                ],
                yAxes: [
                    {
                        gridLines: {
                            display: true,
                            color: "rgba(0, 0, 0, 0.1)"
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }
                ]
            }
        }
    };

    return (
      <div>
        <Bar data={data.dataBar} options={data.barChartOptions} />
      </div>
    );
  }