Reactで三項演算子を使用して表示を切り替える方法

Reactで三項演算子を使用して表示を切り替える

Reactでは、三項演算子を使用してコンポーネントの表示を切り替えることが簡単にできます。
三項演算子は、condition ? trueResult : falseResult の形式で書かれます。
ここでは、三項演算子を使用して、特定の条件に基づいて異なるコンポーネントや要素を表示する方法を示します。

例：ボタンをクリックしてテキストを切り替える

以下は、ボタンをクリックするたびに表示されるテキストやコンポーネントが切り替わる例です。

import React, { useState } from 'react';

const App = () => {
  const [isToggled, setIsToggled] = useState(false);

  const handleToggle = () => {
    setIsToggled(!isToggled);
  };

  return (
    <div>
      <button onClick={handleToggle}>
        {isToggled ? 'Hide Text' : 'Show Text'}
      </button>
      {isToggled ? <HideTextComponent /> : null}
    </div>
  );
};

export default App;

例：ログイン状態に応じて表示を切り替える

以下は、ユーザーのログイン状態に応じて異なるメッセージやコンポーネントを表示する例です。

import React, { useState } from 'react';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginToggle = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <div>
      <button onClick={handleLoginToggle}>
        {isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
      <h1>{isLoggedIn ? <LogOutComponent /> : <LogInComponent />}</h1>
    </div>
  );
};

export default App;

このように、Reactコンポーネント内で三項演算子を使用することで、状態に応じて動的に表示を切り替えることができます。
この方法は、コンパクトで読みやすいコードを書くのに役立ちます。