Reactでよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)を紹介します。
JSXの{}の中にはif文を書けないため、Reactでは「表示するかしないか」を&&、「AかBか」を三項演算子? :、「nullやundefinedのときの代わりの値」を??で書き分けます。比較には==ではなく、型まで一致させる===を使うのがReactに限らずJavaScriptの基本です。"1" == 1はtrueになりますが、"1" === 1はfalseになるので、APIから来た文字列と数値を比べるときに意図しない一致を防げます。
普通のif文で書いた場合
配列がabcという文字列の場合は、◎をつけて表示するという条件の場合、
通常のif文では以下のようになります。
const list = animals
.filter((animal) => animal.indexOf(filteredVal) !== -1)
.map((animal) => {
if(animal === "abc") {
return <li key={animal}>{animal + "◎"}</li>
} else {
return <li key={animal}>{animal}</li>
}
});これを三項演算子で書き換えると以下のようになります。
三項演算子で書いた場合
// .map((animal) => {
// if(animal === "abc") {
// return <li key={animal}>{animal + "◎"}</li>
// } else {
// return <li key={animal}>{animal}</li>
// }
.map((animal) => {
return <li key={animal}>{animal === "abc" ? `${animal}◎` : animal}</li>上のようによりスッキリした書き方になります。
&&で書いた場合
// .map((animal) => {
// return <li key={animal}>{animal === "abc" ? `${animal}◎` : animal}</li>
.map((animal) => {
return <li key={animal}>{animal === "abc" && "◎"}</li>
});&&以下はtrueのときのみ表示されるため、空文字などを記載せずにスッキリ書けます。
1点だけ注意があります。左側が0のとき、{count && <p>...</p>}は0がそのまま画面に表示されます。数値で判定する場合は{count > 0 && ...}のように、左側が必ずtrue/falseになる式にします。配列をmapで表示する際の書き方はReactで配列を表示する方法｜map・filter・keyと表示されない原因にまとめています。
??(Null合体演算子)が必要な場合
Null合体演算子は、A ?? Bのとき、値がnullかundefinedの場合以外はA、nullかundefinedの場合はBとなります。
たとえば、配列内にnullやundefinedが混ざっていると、indexOfなど文字列のメソッドを呼んだ時点でエラーになります。
そのようなエラーを防ぐために、nullかundefinedのときは空文字に置き換える、という記述がNull合体演算子でできます。
.map((animal) => {
{
const animalStr = animal ?? "";
return <li key={animalStr}>{animalStr === "abc" && "◎"}</li>;
}上のようにすれば、nullやundefinedのときは空文字に置き換えられ、エラーを解消できます。||と違い、0や空文字は「値あり」として残るのが??の特徴です。
NULL合体演算子の詳しい説明は、NULL合体演算子(Nullish coalescing operator) ‘??’の具体例を参照してみてください。
クリックなどのイベントに応じて表示を切り替える場合は、【React】イベントを登録する方法でstateを更新し、ここで紹介した書き方で出し分けます。