Toggle(show/hide) components onClick in single page React component useState

Question

How do you toggle between components in the single page case below? Ideally, when you click the menu-item the associated component will show and the others will hide.

React

import React, { useState } from 'react';
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";

const App = () => {
    // Toggle state(s) here?

    // Toggle function(s) here?

    return (
        <div className="nav">
            <ul className="menu">
                <li className="menu-item">About</li>
                <li className="menu-item">Projects</li>
                <li className="menu-item">Contact</li>
            </ul>
        </div>
        <div className="container">
            <About />
            <Projects />
            <Contact />
        </div>
    )
};

export default App;

Answer 1

A simple way is to render a component based on the current state and change the state to render another component:

import React, { useState } from 'react';
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";

const App = () => {
    const [page, setPage] = useState("about")

    return (
        <div className="nav">
            <ul className="menu">
                <li className="menu-item" onClick={() => setPage("about")}>About</li>
                <li className="menu-item" onClick={() => setPage("projects")}>Projects</li>
                <li className="menu-item" onClick={() => setPage("contact")}>Contact</li>
            </ul>
        </div>
        <div className="container">
            {page === "about" && <About />}
            {page === "projects" && <Projects />}
            {page === "contact" && <Contact />}
        </div>
    )
};

export default App;

You probably want to make it a little cleaner but you have the idea.

Answer 2

You can manage an array for menu items and selected component will render! Here is the codepen demo!

const About=()=>"About us page";
const Projects=()=>"Projects page";
const Contact=()=>"Contact Page";
const App = () => {
   const menuItems =[
    {component:<About />, title:"About"},
    {component:<Projects />, title:"Projects"},
    {component:<Contact />, title:"Contact"}
   ];

   const [component, setComponent] = React.useState(menuItems[0].component);

    return (
      <div>
        <div className="nav">
            <ul className="menu">
                {
                  menuItems.map((item,i)=>
                    <li key={i} onClick={()=>setComponent(item.component)} className="menu-item">
                      {item.title}
                    </li>
                  )
                }
            </ul>
        </div>
        <div className="container">
           {component}
        </div>
       </div>
    );
};

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