こんにちは！trueとかfalseって日常だと全然通じないですよね。Mizutani(@sirycity)です。yesとnoの方がよっぽど通じる。

今日はそんなtrueとかfalseがReactで表示できない問題です。

結論

これでOK

const foo = () => {
  const T = true
  const F = false

  return (
    <div>
      トゥルーは{T + ''}
      フォールスは{F + ''}
    </div>
  )
}

JSXにtrueは表示できない

JSXにはtrueとかfalseを表示できません。もうちょい細かくいうと、JavaScriptのnumberやstringはHTMLの文字として評価されるけどbooleanはされないです。こんな感じ。

const foo = () => {
  const N = 1
  const S = 'あ'
  const B = true

  return (
    <div>
      数字は表示できるよ→ {N}
      文字も表示できるよ→ {S}
      真偽は表示できないよ→ {B}
    </div>
  )
}

こうするとこんな感じのHTMLになる。

<div>数字は表示できるよ→ 1 文字も表示できるよ→ あ 真偽は表示できないよ→</div>

そう、booleanは表示できない。

解決策

解決策はすごいシンプルで、stringにしちゃえばOK。 String() とか +'' とかで。後者ならこう。

const foo = () => {
  const T = true
  const F = false

  return (
    <div>
      トゥルーは{T + ''}
      フォールスは{F + ''}
    </div>
  )
}

これでHTMLがこうなってクリア。

<div>トゥルーはtrue フォールスはfalse</div>

さいごに

今日は短い記事でした。自分が初心者のころにちょっとつまずいた内容です。参考になれば嬉しいな。以上。