Reactで数字入ってるかを条件に&&で出し分けようとすると、0が描画される→なぜなら0はfalseだから…！

どういう状況の話かと言うと、

num && ( <Text>{list[num]}</Text> )

のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。

で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画される。

なんで〜〜〜〜と思ってたら、

stackoverflow.com

これに書いてありました。

そう、0はfalseなんですね。numがtrueだと処理が&&の右に移りが描画される…という記述で、falseのときはそこで止まるんですね。

で、booleanだとなにもレンダリングされません。が、当然0は数字なのでレンダリングされます。なので、0だけ描画される、ということでした。考えたら当たり前ですね…

typescript-jp.gitbook.io

なので、もし0も許可したい状況であれば、

!!num && ( <Text>{list[num]}</Text> )

で明示的にbooleanにするか、あとレビューで言われたのは

num !== null && ( <Text>{list[num]}</Text> )

とするか。って感じでした。やーすっきり。

---

TypeScriptがなのかわかんないんだけど、というか有識者教えてほしいのだけど、型がnumberで0が引数としてやってくると
var &&
とするとなんか知らないけど0だけ描画される
var !== null
みたいにすると意図通り諸々描画されるんだけど どういうことなの

— Motoki Watanabe / M0T0K1 (@XxGodmoonxX) 2021年1月23日

Twitterでなんでかなーと思ってふと呟いたら

厳密には falsy扱いで、0 は falsy valueだからみたいな気がするhttps://t.co/NZhEQ5yKGu

— kyeくん (@kyeshimizu) 2021年1月23日

教えてくれた友達スペシャルサンクス