Tengo un componente asignado que itera a través de los datos de la API. Pasa accesorios a cada uno y por lo tanto cada tarjeta se ve diferente. Vea el ejemplo a continuación.
https://gyazo.com/39b8bdc4842e5b45a8ccc3f7ef3490b0
Con lo siguiente, me gustaría lograr dos objetivos:
Cuando se selecciona el componente, usa el estado para PERMANECER SELECCIONADO y cambia el color como tal a, digamos, azul para ese componente seleccionado.
Espero que esto tenga sentido. ¿Cómo indexo una lista como tal y me aseguro de que el color y el estado permanezcan activos en función de esta selección?
Vea abajo.
En el nivel superior, mapeo las siguientes cartas usando estos accesorios.
{ jobs.length > 0 && jobs.map( (job) => <JobCard key={job.id} job={job} />) }Entonces estoy usando el siguiente código para mis componentes:
const JobCard = ({ job }) => { const responseAdjusted = job.category.label const responseArray = responseAdjusted.split(" ")[0] return ( <CardContainer> <CardPrimary> <CardHeader> <CardHeaderTopRow> <Typography variant = "cardheader1"> {job.title} </Typography> <HeartDiv> <IconButton color={open ? "error" : "buttoncol"} sx={{ boxShadow: 3}} fontSize ="2px" size="small" fontSize="inherit"> <FavoriteIcon fontSize="inherit" onClick={()=> setOpen(prevOpen => !prevOpen)}/> </IconButton> </HeartDiv> </CardHeaderTopRow> <Typography variant = "subtitle4" color="text.secondary"> {job.company.display_name} </Typography> </CardHeader> <CardSecondary> </CardSecondary> </CardPrimary> </CardContainer> ) }Puede adjuntar un handler en el componente <CardPrimary> pasando una función al evento onClick . De esa manera, cada vez que haga clic en cualquier parte de la división de la tarjeta, se activará la función.
const [isSelected, setIsSelected] = useState(false); <CardPrimary onClick={() => setIsSelected(true)} className={isSelected ? "css-class-to-highlight-div" : undefined> .... </CardPrimary>Si entiendo lo que está pidiendo, que creo que es que su componente se resalte cuando se haga clic en él, entonces debe modificar el componente 'CardContainer' para que se represente con un parámetro 'onClick'.
Ejemplo:
function CardContainer(props) { const cssClass = 'highlighted'; const my_id = props.id || 'need_an_id'; var clearExistingHighlight = () => [...document.getElementByClassName(cssClass)].forEach((elem)=>elem.classList.remove(cssClass)); var isHighlighted = () => document.getElementById(my_id).classList.contains(cssClass); var setHighlighted = (e) => { clearExistingHighlight(); e.target.classList.add(cssClass); } return ( <div id={my_id} onClick={setHighlighted}>Cheeseburger fry</div> ) }Si no desea que desaparezca el resaltado, puede deshacerse de la función clearExistingHighlight. O si desea que cambie, le recomiendo una modificación de la respuesta de @sid:
const {useState} = React; function CardContainer(props) { const [isSelected, setIsSelected] = useState(false); <div onClick={() => setIsSelected(!isSelected)} className={isSelected ? "highlighted" : undefined> }estilo.css:
.highlighted { background-color: 'orange'; }Puede hacer todo esto sin ningún gancho de reacción y confiar en cambio en las clases CSS. Puede usar el método 'isHighlighted' para determinar si un componente determinado está resaltado o no.