Chart.js chart is not showing inside a React bootstrap modal

Question

I have created a React Bootstrap modal. In the modal body, I want to show a chart from chartJS. Everything seems to work as expected in the modal body. I have tried tables and text but for some reason, it does not show the chart component. I am unable to figure out why it would do that.

Code to render React Modal:

const ButonModal = () => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="outline-primary" onClick={handleShow}>
        Peak Demand
      </Button>
      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>
            Peak Demand
            <p style={{ fontSize: "50%" }}>
              last peak demand occurred on March 12, 2020
            </p>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <PowerConsumptionChart />
        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

<PowerConsumptionChart /> is my chart component with the following code:

class PowerConsumptionChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: {
        labels: [
          "Monday",
          "Tuesday"
        ],
        datasets: [
          {
            label: "Overall Cost",
            data: [12000, 62000],
          }
        ]
      }
    };
  }

  render() {
    return (
      <div className="chart">
        <Line
          data={this.state.chartData}
          options={{
            maintainAspectRatio: false,
            responsive: true,
            legend: {
              display: false
            }
          }}
        />
      </div>
    );
  }
}

Answer 1

So I was able to figure out the solution to this problem. I do not have a concrete explanation for this problem. But I solved it by using onEnter , a callback function fired before the Modal transitions in.

I changed my stateless function to a class component. It doesn't affect anything, I just did it.

Below is my code:

class ButtonModal extends Component {
  state = { loaded: false, show: false };

  setShow = flag => {
    this.setState({ show: flag });
  };

  handleClose = () => {
    this.setShow(false);
    this.setState({ loaded: false });
  };
  handleShow = () => {
    this.setShow(true);
  };

  handleLoad = () => {
    this.setState({ loaded: true });
  };

  render() {
    return (
      <>
        <Button variant="outline-primary" onClick={this.handleShow}>
          Peak Demand
        </Button>
        <Modal
          show={this.state.show}
          onHide={this.handleClose}
          onEnter={this.handleLoad}
          size="lg"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title>
              Peak Demand <PeakDemandTooltip />
              <p
                style={{ fontSize: "50%", fontWeight: "normal", color: "grey" }}
              >
                last peak demand occurred on March 12, 2020
              </p>
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.state.loaded && <PowerConsumptionChart />}
          </Modal.Body>

          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}