tengo una matriz mapeada
const numbers = [ {id : 1, number : 1}, {id : 2, number : 2}, {id : 3, number : 3}, {id : 4, number : 4}, ]No es real, pero es similar a la matriz que tengo de la API como
// state const [open, setOpen] = useState(false); numbers.map((number) => <Button key={number.toString()} onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} > click </Button>y al hacer clic vuelve
<div style={{minHeight: '150px'}}> <Collapse in={open} dimension="width"> <div id="example-collapse-text"> <Card body style={{width: '400px'}}> Some text </Card> </div> </Collapse> </div>Pero el problema es que está representando el Colapso en cada clic en todos los elementos de la matriz. ¿Cómo puedo hacer que sea único para cada elemento?
está configurando un estado open para todo el collapse , por lo que al hacer clic en uno de los botones aparecen todos los componentes del colapso. tienes que implementar un estado abierto en cada colapso en sí mismo así:
import { Button, Card, Collapse } from "@mui/material"; import { useState } from "react"; function Test() { let numbers = [1, 2, 3]; return numbers.map((number) => <MyCollapse number={number} />); } function MyCollapse({ number }) { const [open, setOpen] = useState(false); return ( <> <Button key={number.toString()} onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} > click{" "} </Button> <div style={{ minHeight: "150px" }}> <Collapse in={open} dimension="width"> <div id="example-collapse-text"> <Card body style={{ width: "400px" }}> Some text </Card> </div> </Collapse> </div> </> ); }