苦手克服したい「JSXの{}にはJavaScriptの式書く！！」

はじめに

エンジニアになって3ヶ月経ち、それなりにコードを書いて気づいたのですが…
苦手なところってありませんか？？
いつも間違えてエラーが出たり、なかなか覚えられない文法など…

今日エラーが出たところが私の苦手ポイントでした。
もう流石に引っかかりたくないので、戒めのためにまとめたいと思います。

私の苦手ポイント

私の苦手ポイントは、JSXの{}の中に何を書けばいいのかわからないことです。
JavaScriptの式を書くと知識として知っていても使いこなせておらず、同じようなエラーを出してしまいます。
以下、まさに今日出たエラーを具体例として紹介します。

具体例

背景

クリックすると画面遷移をするボタンがすでに実装されています。
どの画面に遷移するか？によって遷移先とボタンのラベルが異なります。
これまでは、ボタンの種類は2種類だけでしたが、もう１つボタンの種類を増やすことになりました。

方針

こちらが元のコードです。
元は三項演算子で書かれてました。ここに、toPlanCという分岐を入れることになりました。

<div className="button">
    {toPlanA ? (
        <Button onClick={redirectPlanA}>プランAを選択</Button>
      ) : (
        <Button onClick={redirectPlanB}>プランBを選択</Button>
      )}
</div>

分岐が3つになると三項演算子で書くのは難しいので、別で分岐した方が良いだろうと考えました。
if文はJSXの中には書けないので関数としてJSXの外に書きます。

実装

const onClickButton = () => {
    if (toPlanA) {
      return (
        <Button onClick={redirectPlanA}>プランAを選択</Button>
      );
    }
    if (toPlanB) {
      return (
        <Button onClick={redirectPlanB}>プランBを選択</Button>
      );
    }
    return (
       <Button onClick={redirectPlanC}>プランCを選択</Button>
    );
  };

良さそうですね。
switch文で書いてもいいかもしれません。むしろそっちの方がわかりやすかったかも…
今回はif文で書きました。

さああとはこれをJSXで呼ぶだけです。

苦手ポイント

// 型 '() => JSX.Element' を型 'ReactI18NextChildren' に割り当てることはできません。

<div className="button">
	{onClickButton} 
</div>

エラーが出ました😭
なぜーーー！！！！

関数実行してないからだよ！！！
どうして気づかないの！！！！！

これが私が何回も繰り返してしまう苦手ポイントです…
これでは関数を渡しているだけですね。呼び出せていません。

解決

シンプルです。
{}の中で関数実行しましょう。

<div className="button">
	{onClickButton()} 
</div>

JSX内では{}でくくるとJavaScriptの式を埋め込めます。
関数を実行して、式として結果を返してあげましょう。

終わりに

何回同じミスをしているんだというぐらい繰り返している気がします。
なんか引っかかってしまうんですよね。
これを機に減らしたいです😢