How to use script in react?

Question

I'm about to call the code at 'https://www.mql5.com/en/economic-calendar/widgets' from my 'react' project. However, I called 'script' from 'componentDidMount', but I do not know how to call an object called 'new economicCalendar'. I would be very grateful if you could tell me how to solve this.

<script type="text/javascript" src="https://c.mql5.com/js/widgets/calendar/widget.js?6"></script>
<div id="economicCalendarWidget"></div>
<script type="text/javascript">
    new economicCalendar({ width: "100%", height: "100%", mode: 2 });
</script>

import React, { Component } from "react";

class sampleTest extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://c.mql5.com/js/widgets/calendar/widget.js?6";
    document.body.appendChild(script);
  }

  render() {
    return (
      <div className="container-fluid text-center"}>
        <div className="row justify-content-center">
          <div className="col my-5">
            Calendar AREA
          </div>
        </div>
      </div>
    );
  }
}

export default sampleTest;

Does this answer your question? [Adding script tag to React/JSX](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) — , Apr 05 '20 at 09:04

score 0 · Answer 1 · answered Apr 05 '20 at 08:08

0

Take a state variable and on script onload set it to true that variable and in render function render a loading state until state variable is not true.

answered Apr 05 '20 at 08:08

bhavesh27

94
7

score 0 · Answer 2 · answered Apr 05 '20 at 08:24

0

You can go to the public/index.html on the root directory of your project and add a script tag there.

answered Apr 05 '20 at 08:24

Rhaidzsal Ali

158
8

How to use script in react?

2 Answers2