title: Script load in react
body: <p>I want to load the script from a CDN and then execute a function exposed by that script in React:</p>
  
  <pre><code>componentWillMount() {
      console.log('componentWillMount is called');
      const script = document.createElement('script');
      script.src = 'https://foo.azurewebsites.net/foo.js';
      document.body.appendChild(script);
  }
  
  
  componentDidMount() {
      console.log('componentDidMount is called');
      window.foo.render({
          formId: '77fd8848-791a-4f13-9c82-d24f9290edd7',
      }, '#container');
  }
  
  
  render() {
      console.log('render is called');
      return (
          &lt;div id="container"&gt;&lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>The script sometimes takes time to load (generally first time) and when <code>componentDidMount()</code> is called "foo" is not available and I get an error like this:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'render' of undefined</p>
  </blockquote>
  
  <p>How can I assure that <code>componentDidMount()</code> is called once the script is loaded successfully?</p>