title: How can I block a React component to be rendered until I fetched all informations?
body: <p>I need to fetch some informations before rendering my component. The information will be provided by an API and fetched with an ajax call.</p>
  
  <p>I'm just trying to wait 10 seconds before rendering my component but it says:</p>
  
  <p><code>Uncaught Invariant Violation: Login.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.</code></p>
  
  <p>Can i render my component after the fulfilment of a promise?</p>
  
  <pre><code>/** Page Login */
  class Login extends React.Component {
  
    /**
     * @constructor
     * @param {object} props La fonction super() appelle le parent pour y transmettre ses propriétés
     */
    constructor(props) {
      super(props);
  
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }
  
    /**
     * Reçoit les valeurs des formulaires
     */
    handleFormSubmit(data) {
      const { dispatch } = this.props;
  
      dispatch(fetchLoginAuth(data));
    }
  
    normalRender() {
      return (
        &lt;div id="login-page"&gt;
          &lt;div className="container-fluid"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-md-2"&gt;
                &lt;Link to="/" className="home-link"&gt;&lt;img src={BASE_URL + '/assets/img/logo.svg'} alt="Logo" /&gt;&lt;/Link&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-lg-4 col-lg-offset-4"&gt;
                &lt;h1&gt;&lt;FormattedMessage {...messages.loginPageTitle} /&gt;&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            {React.cloneElement(this.props.children || &lt;div /&gt;, { onSubmit: this.handleFormSubmit, login: this.props.login })}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    /**
     * Render le component - ReactTransitionGroup
     * @return {JSX} Rend la page Registration
     */
    render() {
      setTimeout(this.normalRender, 10000);
    }
  }
  </code></pre>
  
  <p>I use ES6 with JSX, redux, an universal router with react-router. </p>
  
  <p>Thank you very much for your help!</p>