Tengo un componente:
import { useState } from "react"; export const Sidebar = () => { const [isOpened, setIsOpened] = useState(false); const handleClick = () => { setIsOpened(!isOpened); } const openedClassName = () => { let classNameString = "collapse"; if (isOpened) { classNameString = classNameString + " show"; } return classNameString; } return ( <ul className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> <li className="nav-item active"> <a className="nav-link" href="#" onClick={handleClick}> <i className="fas fa-fw fa-folder"></i> <span>Pages</span> </a> <div id="collapse1" className={`${openedClassName}`}> <div className="bg-white py-2 collapse-inner rounded"> <a className="collapse-item" href="login.html">Login</a> </div> </div> </li> <div className="text-center d-none d-md-inline"> <button className="rounded-circle border-0" id="sidebarToggle"></button> </div> </ul> ); } export default Sidebar;Quiero producir el className en el colapso 1 ANTES de la representación, así que agregué la función openClassName.
Pero tengo dentro de mi clase toda la función de flecha, no la cadena...
este es el resultado de la prueba:
Expected the element to have class: show Received: () => { let classNameString = "collapse"; if (isOpened) { classNameString = classNameString + " show"; } return classNameString; }Olvidaste llamar a tu función. Estás pasando la definición de la función al nombre de la clase.
Solo haz
<div id="collapse1" className={openedClassName()}>Y debería funcionar. Recuerde usar () para indicar que desea ejecutar la función.
solución: (olvidé llamar a la función)
<div id="collapse1" className={`${openedClassName()}`}>mejor solución
<div id="collapse1" className={`collapse ${isOpened ? 'show' : null}`}>No sé si lo consideras como código sucio, pero prefiero usar:
<div id="collapse1" className={${isOpened && "collapse"}}></div>Si el estado isOpened es verdadero, agregará la clase de colapso, si no lo es, no hará nada