【JS】ReactのJSXでtrueとかfalseが表示されない時には
こんにちは!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>
さいごに
今日は短い記事でした。自分が初心者のころにちょっとつまずいた内容です。参考になれば嬉しいな。以上。
PREV
2021-10-25
【JS】findIndexとNullishCoalescingを同時に使うと危険!
NEXT
2021-11-02
【CSS】文章を両端揃えしたらword-break:break-allも設定しよう
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介