Невозможно выполнить булевское значение в JSX?

Я пытаюсь отобразить логическое значение внутри JSX, однако React оценивает его как выражение и не возвращает ничего после возврата компонента.

Любое обходное решение для этого?

Вот пример

var ipsumText = true;

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

Просто показывает скомпилированный HTML как

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

EDIT: Вот ссылка JSBin для примера http://jsbin.com/nibihodoce/1/edit?html,js,output

EDIT 2: Я уже изучил альтернативу .toString(), однако, поскольку я выполняю итерацию по массиву объектов, а конкретное поле этого объекта может иметь тип string/integer/boolean стоимость. Применение .toString() ко всем 'em не кажется оптимальным.

Ответ 1

 Boolean Value:    { ipsumText.toString() }

UPD: или

 Boolean Value:    { String( ipsumText ) }

или

 Boolean Value:    { '' + ipsumText }

или

 {`Boolean Value: ${ipsumText}`}

или

 Boolean Value:    { JSON.stringify( ipsumText ) }

Я предпочитаю второй вариант. Универсальный, быстрый, работает для всех примитивных типов: Boolean( smth ), Number( smth ).

Ответ 2

Вы можете преобразовать логическое значение в строку, конкатенируя его с пустой строкой:

var ipsumText = true;

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

Или вы можете сделать это, назначив значение bool переменной:

var ipsumText = true + '';

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

Если ваша переменная не имеет значения boolean, вы должны преобразовать ее в boolean:

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