Tengo dos botones separados como cuadrícula y botón de lista:
<button onClick={() => setClassName('jsGridView')} title="Grid View" > <IoGrid className="active" size="25"/> </button> <button onClick={() => setClassName('jsListView')} title="List View" > <BiAlignLeft size="25"/> </button> const [cName, setClassName] = useState('jsGridView');Entonces, cuando hago clic en el botón Vista de cuadrícula, se mostrará este componente:
<GridCard className={cName}/>y cuando hago clic en el botón de vista de lista, se mostrará
<ListCard className={cName}/>con este nombre de clase mencionado ..
la clase se cambia pero el componente mostrar ocultar no funciona.
Puede mostrar diferentes componentes según el valor de cName .
<div className="row mt-4 book-div"> <div className={cName}> { cName === 'jsGridView' ? <BooksGridCard/> : <BooksListCard/> } </div> </div>