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.

"Applying .toString() to all of 'em doesn't seem optimal" -- Use { String( value ) } then. Nothing is more optimal and universal than that. — gaperton
– gaperton, Commented Jul 13, 2016 at 0:12

Noumenon · Accepted Answer · 2021-01-08 21:03:52Z

215

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

edited Jan 8, 2021 at 21:03

Noumenon

6,6424 gold badges67 silver badges85 bronze badges

answered Jul 12, 2016 at 19:24

gaperton

3,8561 gold badge23 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naren Over a year ago

Why do we need do type cast? why can't boolean show directly?

Naren Over a year ago

React doesn't allow object as values, But Vue does show the actual values apart from undefined and null. I belilve it's using toString underhood but why react won't do that?

Alexei - check Codidact Over a year ago

@Naren Angular works the same as in Vue in this regard, which I think is the desirable default behavior.

1ven · Accepted Answer · 2016-07-12 19:35:28Z

3

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';

edited Jul 12, 2016 at 19:35

answered Jul 12, 2016 at 19:23

1ven

7,0361 gold badge29 silver badges39 bronze badges

2 Comments

anuj_io Over a year ago

In case the value isn't boolean, I would wish to show it as is.

1ven Over a year ago

In this case, use this condition: var ipsumText = typeof value === 'boolean' ? value + '' : value; We are checking if variable is boolean, when we are converting it to string, else displaying it as is.

Sarower Jahan · Accepted Answer · 2023-07-03 07:29:30Z

2

@gaperton's answer is fantastic. I have another solution. here it is:

{ipsumText?'true':'false'}

answered Jul 3, 2023 at 7:29

Sarower Jahan

1,5451 gold badge13 silver badges21 bronze badges

1 Comment

anuj_io Over a year ago

I think because of how the problem got edited it lost some context. ipsumText isn't supposed to be boolean all the time, it could be string as well. We don't know it upfront what data type we shall be getting.

Kelvin Low · Accepted Answer · 2021-05-11 12:44:38Z

-2

<select>
    <option value={row.feature_product ? true: true || row.feature_product ? false: false}>
    {`${row.feature_product}`}
    </option>
    <option value={row.feature_product ? false: true || row.feature_product ? true: false}>
    {`${row.feature_product ? false: true}` || `${row.feature_product ? true: false}`}
    </option>
</select>

edited May 11, 2021 at 12:44

Kelvin Low

4007 silver badges22 bronze badges

answered Jan 31, 2020 at 2:14

Jake Smith

7

1 Comment

Premlatha Over a year ago

Please explain your answer.

Collectives™ on Stack Overflow

Cannot render boolean value in JSX?

4 Answers 4

3 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related