Estoy tratando de agregar un componente div secundario (div-col dentro de div-row) al hacer clic en el botón. Como aquí, estoy tratando de cambiar la orientación de las tarjetas de la cuadrícula a la vista de lista. Estoy usando la clase incorporada bootstrap aquí.
Si es grid view , entonces
<div className="row"> {notes.map((item, key) => { return <Noteitem />; })} </div> si se hace clic en el listview de vista de lista
<div className="row"> <div className="col"> {notes.map((item, key) => { return <Noteitem />; })} </div> </div>¿Necesito usar return DOM para ambos por separado? O bienvenido para cualquier otro enfoque también.
cree el estado myView y establezca el valor predeterminado en 'GridView'. Se hace clic en el botón listView, establezca State en 'ListView'.
usa este estado, renderiza como
{ myView === "GridView" ? ( <div className="row"> {notes.map((item, key) => { return <Noteitem />; })} </div> ) : ( <div className="row"> <div className="col"> {notes.map((item, key) => { return <Noteitem />; })} </div> </div> ); }Similar a la respuesta de @Bee, pero un poco más sucinta y desarrollada:
const [grid, setGrid] = useState(false) return ( <button onClick={() => setGrid(!grid)} /> <div className="row"> <div className={grid ? "col" : ""}> {notes.map((item, key) => { return <Noteitem />; })} </div> </div> ) Mantiene el elemento div en el DOM y simplemente cambia el className a y desde col o nullish. Use el atributo onClick en su botón para activar y desactivar la vista de cuadrícula. Mantenga el valor del estado como un valor booleano para que pueda hacer referencia a su valor verdadero/falso directamente usando un operador ternario para asignar el valor className al div .