title: Falsy values in JSX react
body: <p>I am learning reactJs and trying to pass a property to a component.</p>
  
  <p>Code is as follow - </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class myComponent extends React.Component {
      render() {
          if (this.props.signedIn == false) {
              return &lt;h1&gt;Hi&lt;/h1&gt;;
          }
          return &lt;h1&gt;Hello!&lt;/h1&gt;;
      }
  }
  
  ReactDOM.render(
      &lt;myComponent signedIn={false} /&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>This works, but notice the part where I have to inject false as javascript wrapped in curly braces.</p>
  
  <p>My doubt is that does JSX not recognize 'false' string as falsy value as in normal JS?</p>
  
  <p>Reason for asking-
  Comparison with ng-show="false" in angular, which hides the element, But as discussed in comment that might be because ng-show directive manually evaluate 'false' as falsy value.</p>