0
232
ViewsPrinting state value in React which is boolean doesn't get printed by String Interpolation
import React, { Component } from 'react';
class ButtonStatus1 extends Component {
constructor(props){
super(props);
this.state = {
a: "false",
b: false
}
}
render(){
return (
<div>
<h1>a: {this.state.a}, b: {this.state.b}</h1>
</div>
);
}
}
export default ButtonStatus1;
Output:
Expected:
false, false
String Interpolation, as far as I know, will always output in form of string, whatever the input is. So, in that scenario, even if this.state.b was a boolean - false, the output should have been printed. If the value is there -- just because it was boolean, why is it not printed. Isn't this strange??
3 answers
Answer question0
{} is not just string interpolation
It is a JSX syntax to inform that the expression inside it needs to be evaluated
But there are some specific values for which nothing will be rendered, like
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
and booleans are often used for conditional rendering like
{array.length > 0 && array.map(...)}
if array.length > 0 is false, rendering false is not desirable
btw, you can convert the booleans to strings if you want to render them (false.toString())
0
JSX is executing an expression inside of {}, it's not string interpolation.
If React DID print booleans/nulls/undefined, it would mean you could not do short circuits like:
isTrue() && <p>hello world</p>
Instead of rendering nothing if isTrue() equals false, it would always render false in the DOM. This would make conditional rendering much more cumbersome.
0
Into React world return false has the same result as return null. So string interpolation it is simple function that return NOT only strings. It can be any rendered JSX component. That's why false rendered as empty value. You should use
String(this.state.b);