Falsy values in JSX react

Question

I am learning reactJs and trying to pass a property to a component.

Code is as follow -

import React from 'react';
import ReactDOM from 'react-dom';

class myComponent extends React.Component {
    render() {
        if (this.props.signedIn == false) {
            return <h1>Hi</h1>;
        }
        return <h1>Hello!</h1>;
    }
}

ReactDOM.render(
    <myComponent signedIn={false} />,
    document.getElementById('app')
);

This works, but notice the part where I have to inject false as javascript wrapped in curly braces.

My doubt is that does JSX not recognize 'false' string as falsy value as in normal JS?

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.

Answer 1

Don't forget to fix the component name, it should start with uppercase letters.

---

The conditions has nothing to do with JSX, as mentioned in other comments and answers. This is just how JavaScript works.

Please Note, important thing to remember:
Never ever do a double equals (==) a.k.a "Abstract Equality" against a Boolean, This is asking for bugs.

Because the engine will do a type coercion only on the Boolean value and this can lead to unexpected behavior.

For example,

if(2 == true) //returns false

and

if(2 == false) // returns false

from the spec:

If Type(x) is Boolean, return the result of the comparison ! ToNumber(x) == y.

If Type(y) is Boolean, return the result of the comparison x == ! ToNumber(y).

Instead, you could do an implicit check:

if (this.props.signedIn)  

Or explicit check but use the triple equals a.k.a "strict equality"

if (this.props.signedIn === false)

---

As for the react part: Again, it's basically just JavaScript functions and objects after all.
When you are not passing a prop then it will be undefined:

this.props.signedIn // signedIn will be undefined if we didn't pass it as a prop

So, an implicit check like mentioned above:

if (this.props.signedIn) 

Will work just fine.

---

Running example without passing the prop:

class MyComponent extends React.Component {
  render() {
    if (this.props.signedIn) {
      return <h1>Hi</h1>;
    }
    return <h1>not signed on!</h1>;
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Running example with a false passed in:

class MyComponent extends React.Component {
  render() {
    if (this.props.signedIn) {
      return <h1>Hi</h1>;
    }
    return <h1>not signed on!</h1>;
  }
}

ReactDOM.render(
  <MyComponent signedIn={false}/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Running example with a true passed in:

class MyComponent extends React.Component {
  render() {
    if (this.props.signedIn) {
      return <h1>Hi</h1>;
    }
    return <h1>not signed on!</h1>;
  }
}

ReactDOM.render(
  <MyComponent signedIn={true}/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>