Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Formatação
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

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"

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 qu ser em outro componente.

function App() {

const [theme , setTheme] = useState(false) const mudarTema = () => {

theme === false ? setTheme(true) : setTheme(false)

}

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 &&
        <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á esscrito "MUDAR TEMA"

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 que ser em outro componente.

function App() {
  
  const [theme , setTheme] = useState(false)
  const mudarTema = () => {
    
    theme === false ? setTheme(true) : setTheme(false)
  }
 

  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(
   
   <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á escrito "MUDAR TEMA"

Fonte Link

Passar função pra outro componente - ReactJS

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 qu ser em outro componente.

function App() {

const [theme , setTheme] = useState(false) const mudarTema = () => {

theme === false ? setTheme(true) : setTheme(false)

}

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 &&
        <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á esscrito "MUDAR TEMA"