Soy nuevo en reaccionar y trato de cambiar dos estados con un solo clic. En última instancia, quiero ocultar un componente y mostrar el otro cuando hago clic en un botón.
El código funciona al cambiar un estado, pero no con dos
import React from 'react' import Buttons from './Buttons' import SignUp from './SignUp' import SignIn from './SignIn' import { useState } from 'react' const Intro = () => { const [showButtons, setShowButtons] = useState(true) const [showSignIn, setShowSignIn] = useState(false) const showSignInBtn = () => (showSignIn === false) ? setShowSignIn(true) setShowButtons(false) : setShowSignIn(false) const [showSignUp, setShowSignUp] = useState(false) const showSignUpBtn = () => (showSignUp === false) ? setShowSignUp(true) : setShowSignUp(false) return ( <div className='introBox'> <div className='titleMicroReactor'> CARDIFF MICROREACTOR </div> {showButtons && <Buttons showSignInBtn={showSignInBtn} showSignUpBtn=. {showSignUpBtn}/>} {showSignIn && <SignIn />} {showSignUp && <SignUp/>} </div> ) } export default Introla función showSignIn es donde falla, gracias de antemano
Creo que no necesitas dos estados como showSignIn y showSignUp .
Sólo consulte con uno de ellos.
Por ejemplo:
{showSignIn ? <SignIn /> : <SignUp />} Si showSignIn es verdadero, muestre <SignIn /> de lo contrario, muestre <SignUp />
Puedes usar regular si no
const showSignInBtn = () => { if (!showSignIn) { setShowSignIn(true) setShowButtons(false) } else { setShowSignIn(false) } }