Estoy alternando un componente mientras hago clic en div . Se mueve hacia abajo cuando se hace clic, pero no se cierra cuando se vuelve a hacer clic. ¿Qué estoy haciendo mal?
export default function Shiva() { const [loan, setLoan] = useState(false); const handleClick = () => { setLoan(true); } return ( <div className=""> <div className=""> <div className="loan-type-select" onClick={handleClick}> <div className=""> <img src="" /> </div> <p>SBA 7A Loan</p> {loan ? <Data /> : '' } </div> </div> </div>Mire de cerca su controlador de clics:
const handleClick = () => { setLoan(true); } Independientemente del estado actual del loan , siempre establecerá el nuevo estado del loan como true .
Si desea cerrarlo cuando está abierto, cambie el estado actual en lugar de pasar true .
const handleClick = () => { setLoan(!loan); }Me gustaría agregar eso en lugar de usar:
setLoan(!loan)Es mejor usar:
setLoan((preValue)=>{!preValue})De esta manera, se asegura de que no tendrá ningún problema (está cambiando el valor anterior en lugar de cambiar el valor real).