Conditional rendering of HTML elements in React?
<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>