Como llevar el valor de un estado de un componente a otro?-CodePudding

I have this navbar component and it contains a "darkmode" icon, which executes a "useState function to change the icon from light to dark, adding an "active" class, and I would like to carry that same "darkModeToggle" value to the initial component in "App" to add a "dark" to the layout class.

export default function Navbar() {
    const [darkModeToggle, setDarkModeToggle] = useState(false);
    return (
        <>
            <header className='header'>
                <div className='header__container'>
                    <div
                        className={
                            darkModeToggle
                                ? 'header__container__darkmode active'
                                : 'header__container__darkmode'
                        }
                        onClick={() => {
                            setDarkModeToggle(!darkModeToggle);
                        }}
                    >
                        <BiSun className='sun' />
                        <BiMoon className='moon' />
                    </div>
                </div>
            </header>
        </>
    );
}

export default function App() {
    return (
        <div className='layout'>
            <Navbar />
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/services' element={<Services />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<NotFound />} />
            </Routes>
        </div>
    );
}

CodePudding user response：

Put the state in the parent component in this case App and pass the prop throught Navbar

export default function App() {
 const [darkModeToggle, setDarkModeToggle] = useState(false);
    return (
        <div className='layout'>
            <Navbar darkModeToggle={darkModeToggle} setDarkModeToggle={setDarkModeToggle}/>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/services' element={<Services />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<NotFound />} />
            </Routes>
        </div>
    );
}

and in the Navbar

function Navbar({darkModeToggle, setDarkModeToggle}) {
  return (
    <>
      <header className="header">
        <div className="header__container">
          <div
            className={
              darkModeToggle
                ? "header__container__darkmode active"
                : "header__container__darkmode"
            }
            onClick={() => {
              setDarkModeToggle(!darkModeToggle);
            }}
          >
            <BiSun className="sun" />
            <BiMoon className="moon" />
          </div>
        </div>
      </header>
    </>
  );
}