title: Conditional rendering of HTML elements in React?
body: <p>I am looking to render conditionally some HTML elements of my component. </p>
  
  <p>I have a state variable Boolean, which can be either true (want to render text) or false (want to render nothing). </p>
  
  <p>Inside the return param for the render functon, I have tried the following: </p>
  
  <pre><code>{this.state.boolean ? &lt;div&gt;&lt;h1&gt;True&lt;/h1&gt;&lt;/div&gt; : &lt;div&gt;&lt;/div&gt;}
  
  {this.state.boolean &amp;&amp; &lt;div&gt;&lt;h1&gt;True&lt;/h1&gt;&lt;/div&gt; || &lt;div&gt;&lt;/div&gt;}
  </code></pre>
  
  <p>But in both cases, the h1 element is rendered regardless of the state of Boolean!</p>
  
  <p>Any ideas? Thanks in advance.</p>