Why won't my chart.js chart render in React?

Question

I have created this code example. I am using a React functional component, but for some reason the chart won't render. I think it is because React Hooks does not play nice with conditionals, but I don't understand why.

https://codesandbox.io/s/sparkling-darkness-e7bdj

Why doesn't the chart render?

I am using hooks because I don't want to use a class. It seems like this should work and I am getting no errors.

How can I get it to work?

Answer 1

I found a way to fix it.

Normally, the Chart constructor call goes in componentDidMount. The Hook equivalent is useEffect.

Working code is as follows:

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";

import "./styles.css";

function App() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = new Chart(chartRef.current, {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)"
              ],
              borderColor: [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)"
              ],
              borderWidth: 1
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <canvas ref={chartRef} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);