title: Advanced conditional component rendering in react
body: <p>I have a link in jsx. I may create new component for the link in the future but for now I wanted to use simple jsx. I also have a boolean prop that is telling me whether I should render the link or not. If not I want to render plain text in a <code>span</code> or <code>div</code>.</p>
  
  <p>This is how I do it now:</p>
  
  <pre><code>{isPassed &amp;&amp; &lt;a href={'/uri'}&gt;
    &lt;span&gt;Import&lt;/span&gt;
  &lt;/a&gt;}
  {!isPassed &amp;&amp; &lt;span&gt;Import&lt;/span&gt;}
  </code></pre>
  
  <p>This is how I can probably do it better:</p>
  
  <pre><code>{isPassed &amp;&amp; &lt;a href={'/uri'}&gt;
    &lt;span&gt;Import&lt;/span&gt;
  &lt;/a&gt; || &lt;span&gt;Import&lt;/span&gt;}
  </code></pre>
  
  <p><strong>What is the best practice handling conditional rendering like this? I want to make it more readable. First example duplicates the condition and in second example it is not apparent what is going to be rendered.</strong></p>