title: ReactJS ternary operator with boolean props
body: <p>I am trying to use ternary operator with a boolean props</p>
  <p>The app.js is as follows :</p>
  <pre><code>import React from 'react';
  import  HouseFull  from './HouseFull';
  
  function App() {
    return (
      &lt;div&gt;
      &lt;h1&gt; Hello2 &lt;/h1&gt;
      &lt;HouseFull hasOpening=&quot;{false}&quot; /&gt;
  
  
      &lt;/div&gt;
      
    );
  }
  </code></pre>
  <p>The react component is as follows</p>
  <pre><code>import React, { Component } from 'react';
  
  class HouseFull extends Component {
  
      render() {
          return (
              &lt;div&gt;
                   
                  &lt;h1&gt; {this.props.hasOpening} &lt;/h1&gt;
                  &lt;h1&gt; {this.props.hasOpening ? &quot;Available&quot; : &quot;No Vacancy&quot;} &lt;/h1&gt;
                  
              &lt;/div&gt;
          )
  
      }
  
  }
  
  export default HouseFull;
  </code></pre>
  <p>The result of the second h1 tag is the same, if I pass hasOpening as true or false
  If I pass true, following is displayed</p>
  <pre><code>{true}
  available
  </code></pre>
  <p>If I pass false, following is displayed</p>
  <pre><code>{false}
  available
  </code></pre>
  <p>I am suspecting something is wrong in the statement with the ternary operator, but cannot figure out. The value of the boolean flag is reflected properly in the first h1 tag in the outpur</p>