Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
33
rated 0 times [  38] [ 5]  / answers: 1 / hits: 64636  / 8 Years ago, tue, july 12, 2016, 12:00:00

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.


More From » reactjs

 Answers
48
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 ).


[#61402] Monday, July 11, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
cruz

Total Points: 415
Total Questions: 98
Total Answers: 109

Location: France
Member since Thu, May 6, 2021
3 Years ago
cruz questions
Tue, Sep 14, 21, 00:00, 3 Years ago
Fri, Mar 26, 21, 00:00, 3 Years ago
Sat, Oct 26, 19, 00:00, 5 Years ago
;