Cannot read property 'length' of undefined for ChartJS when I use it inside React

Question

I have built a custom component for Radar Chart:

class RadarChart extends Component {
constructor(props) {
    super(props);
    this.canvasRef = React.createRef;
}

componentDidMount () {
    console.log('props: ', this.props)
    this.myRadarChart = new Chart(this.canvasRef.current, {
        type: 'radar',
        data: {
            labels: this.props.labels,
            datasets: [
                {
                    label: "My Second dataset",
                    backgroundColor: "rgba(26,179,148,0.2)",
                    borderColor: "rgba(26,179,148,1)",
                    pointBackgroundColor: "rgba(26,179,148,1)",
                    pointBorderColor: "rgba(26,179,148,1)",
                    data: this.props.data
                }
            ]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            }
        }
    })
}

render() {
    return <canvas ref={this.chartRef} />
}

}

I reference the above component and into my other component and pass as props both the data and labels like this.

class Name1 extends Component {

state = {
    data: [28, 48, 40, 19],
    labels: ["In Person Call", "RTE", "MobilePush", "Speaker Program"],
};

render() {
        return (
              <div>
                 <RadarChart
                   data={this.state.data}
                   labels={this.state.labels}
                 />
              </div>
         )
       }

But I get this error: TypeError: Cannot read property 'length' of undefined.

I checked in the console and I'm able to pass on the data and labels to the other component but for some reason I see that error. Any suggestions?

Answer 1

Modified my code to this and got the chart displayed. I don't know what the issue was but it could be that I hadn't added getContext. I also created the ref outside my state.

class RadarChart extends Component {
constructor(props) {
    super(props);
}
chartRef = React.createRef();


componentDidMount () {
    const myChartRef = this.chartRef.current.getContext("2d");
    new Chart(myChartRef, {
        type: 'radar',
        data: {
            labels: this.props.labels,
            datasets: [
                {
                    label: "My Second dataset",
                    backgroundColor: "rgba(26,179,148,0.2)",
                    borderColor: "rgba(26,179,148,1)",
                    pointBackgroundColor: "rgba(26,179,148,1)",
                    pointBorderColor: "rgba(26,179,148,1)",
                    data: this.props.data
                }
            ]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            }
        }
    })
}

render() {
    return <canvas ref={this.chartRef} />
}

}