Tenho uma função que muda um estado, só que preciso receber essa função em outro componente e aplicar no botão que vai executar a função. Quando coloco um botão nesse mesmo componente, consigo executar a função de mudar o tema da página. Mas o problema é que o botão de mudar o tema tem quque ser em outro componente.
function App() {
const [theme , setTheme] = useState(false) const mudarTema = () => {
function App() {
const [theme , setTheme] = useState(false)
const mudarTema = () => {
theme === false ? setTheme(true) : setTheme(false)
}
return (
}
return (
<>
<div className="App" >
{theme && <Light /> }
<Rotas />
</div>
<Footer />
</>
) }
export default App
onde o botão está:
export const Header = () => {
const [showMenu, setShowMenu] = useState(false) const [hidenav , setHideNav] = useState(true)
return(
{hidenav && )
}
export default App
onde o botão está:
export const Header = () => {
const [showMenu, setShowMenu] = useState(false)
const [hidenav , setHideNav] = useState(true)
return(
<header className="header" >
{hidenav &&
<nav className="nav" >
<div className="logo"><Link to="/">
<img src={Logo} />
</Link></div>
<button >MUDAR TEMA</button>
<BotaoTema />
<button className="botao-menu">
<GiHamburgerMenu onClick={() => {setShowMenu(true); setHideNav(false)} } />
</button>
</nav>
}
..... cortei o restante do código, pra facilitar a leitura, pois o botão é aí onde tá esscritoescrito "MUDAR TEMA"