title: Best practice for conditional rendering of children elements in ReactJs with Redux connect?
body: <p>The situation I have is a login screen that displays one of 3 blocks of code, depending on the store state of the app. Eg... Below would be the resulting render if the second display option was selected.</p>
  
  <pre><code>&lt;LoginFormPage&gt;
    &lt;DisplayOption2 /&gt;
  &lt;/LoginFormPage&gt;
  </code></pre>
  
  <p>There are specific calls and logic for each display option distinct enough to warrant their own containers. My file structure is:</p>
  
  <pre><code>/components
    /displayOpt1.jsx
    /displayOpt2.jsx
    /displayOpt3.jsx
    /loginFormPage.jsx
  /containers
    /displayOpt1.js
    /displayOpt2.js
    /displayOpt3.js
    /loginFormPage.js
  </code></pre>
  
  <p><strong>I need a way to</strong> render the correct option without embedding too much logic into the parent container; since it really doesn't need to know anything about any of the login mechanisms. I can think of a few ways to do it.</p>
  
  <ol>
  <li>All logic in <code>loginFormPage.js</code> with a connect direct to the <code>loginFormPage.jsx</code>. Then conditional parameters in the <code>loginFormPage.jsx</code> that makes calls to the components directly; removing the other containers.</li>
  <li>Create a React.Component in the <code>loginFormPage.js</code> to do the conditional rendering calls to the other containers; this would call all the .jsx files from the container component. <code>loginFormPage.jsx</code> would then render the selected child with <code>{props.children}</code>.</li>
  <li>Same as 2. but do the conditional rendering call in the <code>mergeProps</code> parameter passed to <code>connect</code> in <code>loginFormPage.js</code>; rather than creating a jsx component in the container js code.</li>
  <li>Some standard practice that I don't know of?</li>
  </ol>
  
  <p>Right now I'm leaning towards option 3, but I can't find any evidence with my Google searches of this being a recommended practice. All thoughts are welcome. Thanks.</p>
  
  <hr>
  
  <p>Some code to maybe make it easier:</p>
  
  <p>loginFormPage.jsx</p>
  
  <pre><code>&lt;div&gt;
    &lt;div onClick={props.someActionHeader}&gt;
      &lt;h1&gt;Login Form&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div className="formarea"&gt;
      // render the selected option here based on props.renderOptionChoice
      // this will be one of displayOpt1, displayOpt2, displayOpt3
    &lt;/div&gt;
    &lt;div className="otherstuff"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>displayOpt1.jsx - Opt2.jsx and Opt3.jsx code is a variation of something like this</p>
  
  <pre><code>&lt;div onClick={props.someAction1}&gt;
    stuff...
  &lt;/div&gt;
  </code></pre>
  
  <p>loginFormPage.js</p>
  
  <pre><code>import LoginFormPage from '../components/loginFormPage'
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      renderOptionChoice: state.login.selectedLoginType,
    }
  }
  const mapDispatchToProps = ...
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginFormPage)
  </code></pre>