JSXのコンポーネントを条件分岐の中で書く場合のルール

記事の概要
実際のコード
1. うまくいかなかったコード
2. うまくいったコード
解説

記事の概要

今回、私はJSXのreturn() の中に条件分岐でJSXのコンポーネントを入れたかったのですが、それがうまくいきませんでした。（sxは共通だったため）

そこで、恥ずかしながら、うまくいかなかったコードとうまくいったコードを公開したいと思います。

実際のコード

うまくいかなかったコード

const [isStop, setIsStop] = useState<boolean>(true)

return (
	<div className="flex items-center justify-start w-1/3">
	    <{isStop ? (
	        StopCircleOutlinedIcon
	    ) : (
	        PlayCircleOutlinedIcon
	    )}
	    sx={{
	                fontSize: 35,
	                width: '16.666667%',
	                textAlign: 'center',
	                color: '#38bdf8',
	            }}
	        />
	    <p className="w-5/6 text-left">タスク１</p>
	</div>
);

うまくいったコード

const [isStop, setIsStop] = useState<boolean>(true);

const IconComponent = isStop ? StopCircleOutlinedIcon : PlayCircleOutlinedIcon;

return (
  <div className="flex items-center justify-start w-1/3">
    <IconComponent
      sx={{
        fontSize: 35,
        width: '16.666667%',
        textAlign: 'center',
        color: '#38bdf8',
      }}
    />
    <p className="w-5/6 text-left">タスク１</p>
  </div>
);

解説

調べてみると、JSXではコンポーネントを条件分岐の中に書く際には、JSX構文のルールに従う必要があるようです。

具体的には、以下のようなルールがあります。（参考サイト）

例）ユーザーがログインしているかどうか

1.JSXタグとして直接使う方法
条件式の中でJSXタグを使うことができます。
この場合、条件式の評価結果に応じてコンポーネントがレンダリングされるかされないかが決まります。

const UserGreeting = ({ isLoggedIn }) => (
  <div>
    {isLoggedIn ? <WelcomeMessage /> : <LoginPrompt />}
  </div>
);

2. レンダリングロジックを分離する方法
条件分岐が複雑になる場合は、レンダリングロジックを別の関数や変数に分離することで、JSXの可読性を高めることができます。
今回はこちらの方法で解決しました。

const UserGreeting = ({ isLoggedIn }) => {
  const renderContent = () => {
    if (isLoggedIn) {
      return <WelcomeMessage />;
    } else {
      return <LoginPrompt />;
    }
  };

  return <div>{renderContent()}</div>;
};