title: Conditional HOC in ReactJS
body: <p>In brief, is it possible to make a conditional HOC (Higher order Component) in ReactJS?</p>
  
  <p>My scenario:</p>
  
  <p>I have these components:</p>
  
  <ul>
  <li>Modal.jsx,    </li>
  <li>WithGATracking.jsx </li>
  <li>GAModal.jsx</li>
  </ul>
  
  <p>Modal is just a normal pop-up component;</p>
  
  <p>WithGATracking is the HOC which does some extra things on top of the Modal component.</p>
  
  <p>Here is the code for <strong>GAModal.jsx</strong></p>
  
  <pre><code>import Modal from './Modal.js';
  import WithGATracking from './Hoc/WithGADurationTracking.jsx';
  
  export default WithGATracking ({startEventName:"event-name"})(Modal);
  </code></pre>
  
  <p>this is how we use it:</p>
  
  <pre><code>      {
                  this.state.showSlider &amp;&amp; 
                  &lt;GAModal id="photo-popup" title={this.props.Name}&gt;
                      {slider}
                  &lt;/GAModal&gt;
              }
  </code></pre>
  
  <p>Is it possible to remove the code which controls whether to show or hide the GAModal and put this piece of code inside of GAModal?</p>
  
  <p><strong>What I have tried:</strong></p>
  
  <pre><code>class GAModal extends Component {
      render() {
          if (this.props &amp;&amp; this.props.isOpen) {
              return (
                  WithGATracking ({startEventName:"event-name"})(Modal)
              );
          }
  
          else {
              return null;
          }
      }
  }
  
  export default GAModal;
  </code></pre>
  
  <p><strong>And here is how I use it after the change:</strong></p>
  
  <pre><code>&lt;GAModal id="photo-popup" title={this.props.Name} isOpen={this.state.showSlider} &gt;
      {slider}
  &lt;/GAModal&gt;
  </code></pre>
  
  <p>But I keep getting this error:</p>
  
  <blockquote>
    <p>invariant.js:42 Uncaught Error: GAModal.render(): A valid React
    element (or null) must be returned. You may have returned undefined,
    an array or some other invalid object.</p>
  </blockquote>