Tengo un componente principal que tiene una lista de tarjetas asignadas. Dentro de estas tarjetas, cada una tiene su propio estado, etc. y características de una API. Cuando se selecciona, la tarjeta se volverá azul según este estado. Lo que me gustaría hacer es tener solo 1 tarjeta activa a la vez, sin embargo, no estoy seguro de cómo hacerlo dado que el estado está en el componente secundario. ¿Cómo volvería a alimentar al estado e implementaría solo 1 componente activo? También me gustaría usar este estado en el componente principal, ya que planeo devolver el estado de selección activo y asignarlo al

Componente principal:

 const JobListing = () => { <BottomReturnMaster> <FilterInterior> {/* BELOW IS WORKING */} { jobs.length > 0 && jobs.map( (job) => <JobCard key={job.id} job={job} />) } </FilterInterior> <JobInsightsInterior> <TopSectionGeneralContainer> What's the details of this job? </TopSectionGeneralContainer> </JobInsightsInterior> </BottomReturnMaster> ) } export default JobListing

Y también, mi estado se administra en isSelected useState. a partir de ahora, cuando se seleccione la tarjeta, se pondrá azul como estaba previsto. El problema es que solo me gustaría una tarjeta activa a la vez.

Componente hijo:

 const JobCard = ({ job }) => { const [open, setOpen] = useState(false) const [isSelected, setIsSelected] = useState(false); return ( <CardContainer> {/* BELOW WORKING */} <CardPrimary onClick={() => setIsSelected(true)} className={isSelected ? "css-class-to-highlight-div" : undefined}> <CardHeader> <CardHeaderTopRow> <Typography variant = "cardheader1"> {job.title} </Typography> </CardHeaderTopRow> <Typography variant = "subtitle4" color="text.secondary"> {job.company.display_name} </Typography> </CardHeader> <CardSecondary> </NewDateContainer> </CardSecondary> </CardPrimary> </CardContainer> ) } export default JobCard