title: Conditionally change order of rendering React component
body: <p>I have three component <code>&lt;Header /&gt;</code> <code>&lt;Body /&gt;</code> <code>&lt;Footer /&gt;</code>. I want to change the order of display according to condition as below.</p>
  
  <pre><code>&lt;div&gt; &lt;Header /&gt; &lt;Body /&gt; &lt;Footer /&gt; &lt;/div&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;div&gt;  &lt;Body /&gt; &lt;Header /&gt; &lt;Footer /&gt; &lt;/div&gt;
  </code></pre>
  
  <p>or some different order according to some new condition.</p>