Cannot render boolean value in JSX?

Question

I am trying to render boolean value inside JSX, however React is evaluating it as expression and isn't returning anything after the component is returned.

Any workaround for this?

Here is an example

var ipsumText = true;  ReactDOM.render(   <div>      Boolean Value:    {ipsumText}   </div>,   document.getElementById('impl') ); 

Just shows compiled HTML as

<div data-reactid=".0"><span data-reactid=".0.0">Boolean Value:    </span></div> 

EDIT: Here is the JSBin link for the example http://jsbin.com/nibihodoce/1/edit?html,js,output

EDIT 2: I have already explored the .toString() alternative, however since I am iterating over an array of objects and a particular field of that object can have string/integer/boolean kind of value. Applying .toString() to all of 'em doesn't seem optimal.

Answer 1

Boolean Value: { ipsumText.toString() } 

or

Boolean Value: { String(ipsumText) } 

or

Boolean Value: { '' + ipsumText } 

or

{`Boolean Value: ${ipsumText}`} 

or

Boolean Value: { JSON.stringify(ipsumText) } 

I prefer the second option. Universal, fast, works for all primitive types: Boolean( smth ), Number( smth ).

Answer 2

You can convert boolean value to string, concatenating it with empty string:

var ipsumText = true;  ReactDOM.render(   <div>      Boolean Value: {ipsumText + ''}   </div>,   document.getElementById('impl') ); 

Or you can do it, when assigning bool value to variable:

var ipsumText = true + '';  ReactDOM.render(   <div>      Boolean Value: {ipsumText}   </div>,   document.getElementById('impl') ); 

If your variable can have not boolean value, you should convert it to boolean:

// `ipsumText` variable is `true` now. var ipsumText = !!'text';