はじめに
Reactで三項演算子の条件文に空配列を指定したら、ずーーーっとtrueとして実行されており、「ありゃっ」となったので調べました。
何がしたかったのか
- 配列の個数によって表示するものを切り替えたかった。
- 具体的には配列の個数が0個以上だったらBlogListコンポーネントにブログを渡し、ブログ一覧を表示する。0個の場合はブログが見つからないよーと表示させる
Blog.tsx
{blogData.contents ? <BlogList blogData={blogData} /> : <p>ブログが見つかりませんでした</p>}
何が起きたのか
配列の個数が0個の場合でもブログが見つからないよーと表示されることなく、真っ白な状態であった。。。
( ﾟдﾟ)...「What's happend?」
調査開始
思いっきり下記に書いており、空配列はtrutyな値でした。
そりゃあ三項演算子の右側が実行されるわけありませんね。
- https://developer.mozilla.org/ja/docs/Glossary/Truthy
修正開始
- lengthプロパティを付与します。
Blog.tsx
{blogData.contents.length ? <BlogList blogData={blogData} /> : <p>ブログが見つかりませんでした</p>}
これなら配列の要素数を元に真偽を導き出すことができるので、0個の場合は右側が実行されるようになりました。
おわりに
そもそも配列をそのまま条件文に入れることが間違っていたかもしれません。
参考
https://developer.mozilla.org/ja/docs/Glossary/Truthy
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length