[tsx]useState を使った簡単な条件分岐

state.tsx

import React, { useState } from 'react';

// それぞれのコンポーネント
const ComponentA: React.FC = () => <div>Component A</div>;
const ComponentB: React.FC = () => <div>Component B</div>;
const ComponentC: React.FC = () => <div>Component C</div>;

const MyComponent: React.FC = () => {
  // ステートを定義
  const [currentComponent, setCurrentComponent] = useState<string>('A');

  // ステートに応じたコンポーネントを切り替え
  let renderedComponent;
  switch (currentComponent) {
    case 'A':
      renderedComponent = <ComponentA />;
      break;
    case 'B':
      renderedComponent = <ComponentB />;
      break;
    case 'C':
      renderedComponent = <ComponentC />;
      break;
    default:
      renderedComponent = <div>Invalid Component</div>;
      break;
  }

  return (
    <div>
      <div>
        <button onClick={() => setCurrentComponent('A')}>Show A</button>
        <button onClick={() => setCurrentComponent('B')}>Show B</button>
        <button onClick={() => setCurrentComponent('C')}>Show C</button>
      </div>
      {renderedComponent}
    </div>
  );
};

export default MyComponent;