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

React

import React, { useState } from 'react';
import About from "./ponents/About";
import Projects from "./ponents/Projects";
import Contact from "./ponents/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;

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

React

import React, { useState } from 'react';
import About from "./ponents/About";
import Projects from "./ponents/Projects";
import Contact from "./ponents/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;

• javascript
• reactjs
• react-functional-ponent

2 Answers 2

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

import React, { useState } from 'react';
import About from "./ponents/About";
import Projects from "./ponents/Projects";
import Contact from "./ponents/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.

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

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

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

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

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