javascript - Cannot render boolean value in JSX? - Stack Overflow

admin管理员组

文章数量:1134572

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

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.

• javascript
• reactjs

Share Improve this question Follow edited Jul 12, 2016 at 19:26 anuj_io asked Jul 12, 2016 at 19:20 anuj_ioanuj_io 2,17322 gold badges1313 silver badges2020 bronze badges 1

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

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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 ).

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

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

{ipsumText?'true':'false'}

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

本文标签： javascriptCannot render boolean value in JSXStack Overflow