He probado todos los métodos y sigue sin funcionar. Estoy tratando de crear un sitio web que tenga un ícono de menú que se muestre en la vista móvil, de modo que cuando hago clic en él: ¡alterna!
import React, {useState} from 'react' import {Link} from 'react-router-dom'; import './Navbar.css'; import { Button } from './Button'; function Navbar() { const {click, setClick} = useState(false); const {button, setButton} = useState(true); const handleClick = () => setClick(!click); const closeMobileMenu = () => setClick(false); const showButton = () => { if(window.innerWidth <= 960){ setButton(false); } else { setButton(true); } }; window.addEventListener("resize", showButton); return ( </Link> <div className="menu-icon" onClick={handleClick}> <i className={click ? "fas fa-times" : "fas fa-bars"} /> </div> ) } export default Navbarno use div para manejar onclick en su lugar use la etiqueta de entrada de envío o etiqueta de botón
El useState devuelve una variable de estado y una función de controlador para establecer el estado de la variable como una matriz, y no como un objeto. Por lo tanto, la función y la variable devuelta deben destruirse como una matriz en lugar de desestructurarse el objeto que está utilizando actualmente. La desestructuración de la matriz se puede hacer usando [] . Por ejemplo, si una función devuelve una matriz [1,2,3] , se puede desestructurar y asignar a diferentes variables de una sola vez usando la desestructuración de matrices, como: const [a,b,c] = [1,2,3]
const [click, setClick] = useState(false); const [button, setButton] = useState(true); //button and setButton in an array and not object.