Estoy construyendo un sitio web de pila completa usando mern (mongo express reactjs y nodejs) por primera vez usando ganchos de reacción. Así que tengo tarjetas de arranque con un botón de contracción para ocultar el texto del cuerpo de la tarjeta, pero tengo 6 tarjetas y el botón de contracción funciona con el enlace useState, de manera que onClick establece la propiedad de expansión en falso y viceversa. Mi pregunta es si debo usar 6 ganchos useState para las 6 tarjetas. o de cualquier manera, hay alguna solución. PD. que si se usa el mismo gancho en todas las tarjetas, onClick expandirá todas las tarjetas.
aquí está mi código de un estado de uso y una tarjeta:
const [open1, setOpen1] = useState(false); <Button onClick={() => setOpen1(!open1)} aria-controls="example-collapse-text" aria-expanded={open1} > click </Button> <Collapse in={open1}> <div id="example-collapse-text"> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </div> </Collapse>bueno, esto se resolvió creando un componente para la tarjeta y luego usándolo como un elemento jsx.
export default function DepartmentCard() { const [open, setOpen] = useState(false); <Button onClick={() => setOpen(open)} aria-controls="example-collapse-text" aria-expanded={(open === 1)? true : false}> click </Button> <Collapse in={open}> <div id="example-collapse-text"> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </div> </Collapse> }Por cierto, es el mismo código, pero en lugar de usarlo 6 veces, lo hice como un componente y usé la etiqueta del componente 6 veces. pero la diferencia es que ahora cada componente tiene su propio estado
Ejemplo:
ReactDOM.render( <div> <DepartmentCard/> <DepartmentCard/> <DepartmentCard/> <DepartmentCard/> <DepartmentCard/> <DepartmentCard/> </div>o simplemente puede usar la función map() o un bucle para representar las 6 cartas. y puedes usar accesorios para cambiar el cuerpo de cada tarjeta.
¿Puedes probar la siguiente lógica?
const [open, setOpen] = useState(1); <Button onClick={() => setOpen(1)} aria-controls="example-collapse-text" aria-expanded={(open === 1)? true : false}> click </Button> <Collapse in={(open === 1)? true : false}> <div id="example-collapse-text"> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </div> </Collapse> <Button onClick={() => setOpen(2)} aria-controls="example-collapse-text" aria-expanded={(open === 2)? true : false}> click </Button> <Collapse in={(open === 2)? true : false}> <div id="example-collapse-text"> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </div> </Collapse>Lo que debe hacer es crear una carpeta con el nombre de componente (el nombre no necesariamente debe ser el mismo, pero esto se sigue mucho). En esa carpeta haz tu componente de tarjeta como este
import React, { useState } from "react"; const card = ({ prop1, prop2 }) => { const [isOpen, setOpen] = useState(false); const collapseListener = () => { setOpen((prvState) => !prvState); }; return ( <div> <button onClick={collapseListener}>{/* button to collapse */}</button> <collable collapse={isOpen}> {/* your collapasble component */} <h1>{prop1}</h1> <h1>{prop2}</h1> </collable> </div> ); }; export default card;Luego puede importar este componente de tarjeta desde cualquier lugar y puede usarlo así
<Card prop1={'first'} prop2={'second'} />