Encontré el siguiente problema: necesito usar la función de otro componente dentro de un componente:
encabezado.js
export default function Header() { const [showModalLogin ,setShowModalLogin] = useState(false); return( <> <span>Hi, <Link onClick={() =>{ setShowModalLogin(true)}}>login</Link> </span> {showModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''} </> ); }casa.js
import Header from '../../components/header/header'; export default function Home() { return ( <> <Header /> <Link onClick={() =>{ setShowModalLogin(true)}}>open login</Link> </> }¿Cómo hago en home.js para llamar a la función setShowModalLogin que está en header.js? También estoy tratando de usar la API de contexto, pero todavía no puedo resolverlo.
Simplemente puede colocar useState en el componente Header y pasar setShowModalLogin como accesorios:
import Header from '../../components/header/header'; export default function Home() { const [isShowModalLogin ,setShowModalLogin] = useState(false); return ( <> <Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} /> <Link onClick={() => setShowModalLogin(true)}>open login</Link> </> } export default function Header({ isShowModalLogin, setShowModalLogin }) { return( <> <span>Hi, <Link onClick={() => setShowModalLogin(true)}>login</Link> </span> {isShowModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''} </> ); }Entonces puedes hacerlo de esta manera:
export const YourContext = createContext(); export const YourProvider = ({ children }) => { const [isShowModalLogin, setShowModalLogin] = useState(false); const value = { isShowModalLogin, setShowModalLogin }; return <YourContext.Provider value={value}>{children}</YourContext.Provider>; } // App.js const App = () => { return ( <YourProvider> <AppContent /> </YourProvider> ) }Entonces ahora puedes usarlo como aquí:
import Header from '../../components/header/header'; export default function Home() { const { isShowModalLogin, setShowModalLogin } = useContext(YourContext); return ( <> <Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} /> <Link onClick={() => setShowModalLogin(true)}>open login</Link> </> }