How to create a switching component for displaying different pages?

A switching component is a wrapper React component that chooses which “page” or view to render based on some state or context—often representing tabs, steps in a wizard, or even simple client‐side routing.

1. State‐Driven View Selection 🎛️

   • The component holds a piece of state (e.g. activePage) that indicates which child component to show.
   • Updating that state (via buttons, links, etc.) triggers a re‐render with the new view.

2. Declarative Mapping 🗺️

   • Use a simple object or switch statement to map state values to the corresponding page components.
   • Keeps your render logic clean and easy to extend.

3. Navigation Controls 🧭

   • Provide UI controls (buttons, links, tabs) that call the state setter to change activePage.
   • You can style the active control to give users visual feedback.

4. Extensibility ✨

   • Easily add or remove pages by updating the mapping or adding new entries.
   • Can be wrapped in context or React Router for more advanced routing needs.

Code Example: Simple Tab‐Style Page Switcher