score:0

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>
      </>
    );
  }
}

Related Query

More Query from same tag