JSX falsity values

Question

I am studying responseJs and trying to pass a property to a component.

The code is as follows:

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 pay attention to the part where I need to enter false as javascript wrapped in curly braces.

I doubt that JSX does not recognize the string "false" as a false value, as in regular JS?

Comparison with ng-show = "false" in angular, which hides an element. But as discussed in the comment, this may be because the ng-show directive manually evaluates the value "false" as the value of falsity.

Answer 1

Do not forget to correct the name of the component, it should begin with capital letters .

<h / "> The conditions are not related to JSX , as indicated in other comments and answers. That is how JavaScript works.

Please note that it is important to remember:
Never do double equal ( == ) aka "Abstract equality" against boolean, This requires errors.

Because the engine will only apply type coercion to a logical value, which can lead to unexpected behavior.

For instance,

 if(2 == true) //returns false 

and

 if(2 == false) // returns false 

from 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 can perform an implicit check:

 if (this.props.signedIn) 

Or an explicit check, but using a triple equals aka "strict equality"

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

<h / "> Regarding the react part: Again, these are basically just JavaScript functions and objects.
When you do not miss prop then there will be undefined :

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

So, the implied check as above:

 if (this.props.signedIn) 

Will work fine.

<h / "> Running the example without gaps:

 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> 

The execution example with false passed to:

 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> 

Example run with true passed to:

 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> 

Answer 2

No Javascript compares falsy string with false , if you want to do this, you can simply do this by checking the if condition and not providing a fake boolean value as a support.

 class MyComponent extends React.Component { render() { if (this.props.signedIn) { return <h1>Hi</h1>; } return <h1>Hello!</h1>; } } render( <MyComponent />, document.getElementById('root') ); 

and true case like

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

Answer 3

All false , 0 , empty lines '' and "" , NaN , undefined and null always evaluated as false; everything else is true.

JSX gives nothing but a template system. therefore its base is in javascript, not JSX.

so in your example, you can simply remove == false , and javascript will evaluate all of these patterns for you.

so you can see the source of ng-hide in this link to find out more

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js

and also learn more about the operator here