title: ReactJS: including script in a specific component
body: <p>I need to include jquery and form validations libraries into a specific component. I have already tried <code>react-async-script-loader</code> but couldn't get it to work.</p>
  
  <p><em>Please note, I am using the Laravel and ReactJS. Also the code I have included is the sample code from the github repository (<a href="https://github.com/leozdgao/react-async-script-loader" rel="nofollow noreferrer">https://github.com/leozdgao/react-async-script-loader</a>). However, I have the downloaded files to used in the Laravel public folder.</em></p>
  
  <p><strong>Here is the error I am getting:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/X5CBw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5CBw.png" alt="enter image description here"></a></p>
  
  <pre><code>Uncaught TypeError: Cannot convert undefined or null to object
  at Function.getOwnPropertyNames (&lt;anonymous&gt;)
  at hoistNonReactStatics (app.js:50805)
  at app.js:50617
  at Module../resources/js/components/TorrentsAdd.jsx (app.js:81726)
  at __webpack_require__ (app.js:20)
  at Module../resources/js/Index.js (app.js:81096)
  at __webpack_require__ (app.js:20)
  at Object../resources/js/app.js (app.js:81203)
  at __webpack_require__ (app.js:20)
  at Object.0 (app.js:82191)
  </code></pre>
  
  <p><strong>Here is the code:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import Axios from 'axios';
  import scriptLoader from 'react-async-script-loader';
  
  /** elements */
  import Breadcrumbs from './elements/Breadcrumbs';
  
  export default scriptLoader(
      [
          'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'
      ]
  )(SampleForm)
  
  class SampleForm extends Component
  {
      constructor()
      {
          super();
  
          this.state = {
              categories: [],
              years: [],
              status: [],
          };
      }
  
      componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed })
      {
          if (isScriptLoaded &amp;&amp; !this.props.isScriptLoaded) // load finished
          { 
              if (isScriptLoadSucceed)
              {
                  this.initEditor()
              }
              else
              {
                  this.props.onError()
              }
          }
      }
  
      componentDidMount()
      {
          const { isScriptLoaded, isScriptLoadSucceed } = this.props;
  
          if (isScriptLoaded &amp;&amp; isScriptLoadSucceed)
          {
              this.initEditor()
          }
      }
  
      componentWillMount()
      {
          Axios
              .get("/api/categoriesDropdown")
              .then(response =&gt; {
                  this.setState({
                      categories: response.data.categories,
                      years: response.data.years,
                      status: response.data.status
                  });
              });
      }
  
      render()
      {
          ...
      }
  }
  </code></pre>