Tengo una matriz que consta de algunos datos. Mi matriz es,
const faqData = [ { q: "How Can We Help You?", a: "Below are answers to our most commonly asked questions. If you cannot find an answer here, please contact us.", }, { q: "How Can We Help You?", a: "Below are answers to our most commonly asked questions. If you cannot find an answer here, please contact us.", }, { q: "How Can We Help You?", a: "Below are answers to our most commonly asked questions. If you cannot find an answer here, please contact us.", }, ];Para mostrar todos los datos de la matriz dentro de las tarjetas, estoy usando la función de mapa que es,
{faqData.map((item, index) => { return ( <SimpleFlexContainer sx={{ flexDirection: "column", m: "20px 0px" }} > <SimpleFlexContainer sx={{ background: "#F4F4F5", width: "100%", p: "15px 25px", justifyContent: "space-between", alignItems: "center", }} > <SimpleFlexContainer> <SmallTypo sx={{ fontWeight: "bold", mr: { xs: "15px", md: "25px" } }} > Question </SmallTypo> <SmallTypo sx={{ fontWeight: "bold" }}>{item.q}</SmallTypo> </SimpleFlexContainer> <Box> <IconButton> {openDes ? ( <RemoveIcon onClick={() => setDes(false)} /> ) : ( <AddIcon onClick={() => setDes(true)} /> )} </IconButton> </Box> </SimpleFlexContainer> <Box sx={{ display: openDes ? "inherit" : "none", background: "white", p: "26px", border: "1px solid #F4F4F5", }} > <SmallTypo>{item.a}</SmallTypo> </Box> </SimpleFlexContainer> ); })}Cuando los usuarios hacen clic en las tarjetas individuales, quiero mostrar un color de borde alrededor de esa tarjeta específica. ¿Cómo lograr esto?
La mejor solución para esto es crear un componente separado. Algo como esto:
import { useState } from 'React'; const FAQComponent = (props) => { const { item, } = props; const [active, setActive] = useState(false); const [openDes, setDes] = useState(false); return ( <SimpleFlexContainer sx={{ flexDirection: "column", m: "20px 0px" }} onClick={() => setActive(pre => !pre)} > <SimpleFlexContainer sx={{ background: "#F4F4F5", width: "100%", p: "15px 25px", justifyContent: "space-between", alignItems: "center", }} > <SimpleFlexContainer> <SmallTypo sx={{ fontWeight: "bold", mr: { xs: "15px", md: "25px" } }} > Question </SmallTypo> <SmallTypo sx={{ fontWeight: "bold" }}>{item.q}</SmallTypo> </SimpleFlexContainer> <Box> <IconButton> {openDes ? ( <RemoveIcon onClick={() => setDes(false)} /> ) : ( <AddIcon onClick={() => setDes(true)} /> )} </IconButton> </Box> </SimpleFlexContainer> <Box sx={{ display: openDes ? "inherit" : "none", background: "white", p: "26px", border: "1px solid #F4F4F5", }} > <SmallTypo>{item.a}</SmallTypo> </Box> </SimpleFlexContainer> ) }Ahora puede mapear su componente en otro lugar:
{faqData.map((item, index) => <FAQComponent key={item.a} item={item} />)} NOTA : Es muy importante que React coloque un argumento key en los componentes asignados, puede usar cualquier otro campo del objeto del elemento que sea único.
Y después de esto, use la constante active para determinar si debe cambiar el borde o no.
Use el estado para mantener el índice del elemento en el que se hizo clic
const [clicked, setClicked] = React.useState('') luego, puede tener un estilo en uno de los SimpleFlexContainer externos como
sx={{borderColor: clicked === index ? 'your_favourite_color': ''}}y no olvide eliminar el valor del índice cuando haga clic fuera o déjelo si no le importa.