<p dir="auto">Hi reactjs Team, I suggest that, team should add a new prop for every component that purly used to show or hide component conditionally.<br>
i.e<br>
Instead of writing code like this in JSX.<br>
{show &amp;&amp; }<br>
we simply use like this  and that's it.</p>
<ul dir="auto">
<li>Toggle Component</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render(){
  var Child = something? A : B;
  return (
    &lt;Child /&gt;
  ) 
}"><pre class="notranslate"><code class="notranslate">render(){
  var Child = something? A : B;
  return (
    &lt;Child /&gt;
  ) 
}
</code></pre></div>
<ul dir="auto">
<li>Toggle CSS Display is simple</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="className={this.props.shouldHide ? 'hidden' : ''} "><pre class="notranslate"><code class="notranslate">className={this.props.shouldHide ? 'hidden' : ''} 
</code></pre></div>