Reactで条件付きレンダリングをする方法

Reactで条件付きレンダリングをする方法

Reactで条件付きレンダリングを行う方法について説明します。
以下は、TypeScriptを使用した例です。

条件付きレンダリングの例

以下の例では、isLoggedInという状態を持つコンポーネントを作成し、ログイン状態に応じて異なるメッセージを表示します。

import React, { useState } from 'react';

const ConditionalRenderingExample: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  return (
    <div>
      {isLoggedIn ? (
        <h1>ログインしました！</h1>
      ) : (
        <h1>ログインしていません。</h1>
      )}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'ログアウト' : 'ログイン'}
      </button>
    </div>
  );
};

export default ConditionalRenderingExample;

使用方法

このコンポーネントを使用するには、Appコンポーネントなどでインポートして使います。

import React from 'react';
import ReactDOM from 'react-dom';
import ConditionalRenderingExample from './ConditionalRenderingExample';

const App: React.FC = () => {
  return (
    <div>
      <ConditionalRenderingExample />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

この例では、ボタンをクリックすることでログイン状態がトグルされ、それに応じて表示されるメッセージが変更されます。