Reactでのrender内での出し分けをする条件分岐の書き方を学んだのでメモ。
三項演算子
const testBooloean = true;
{testBooloean ? <div>testBooloean === true;</div> : <div>testBooloean === false;</div>}
&& の書き方
const testBooloean = true;
{testBooloean && <div>testBooloean === true; </div>}
このとき注意すること!
比較する値(今回でいうtestBooloean)には必ずBooleanの値が入るようにしなきゃいけないです。
例えば...
const arr = [];
{arr.length && <div>test</div>}
arr = [];なのになぜか「0」が表示されてしまいます。
arrの配列の中が空の場合...という条件にしたい場合は
const arr = [];
// Booleanになるようにしましょう
{!!arr.length && <div>test</div>};