Estoy trabajando en una aplicación Reactjs simple donde encontré un problema. Actualmente tengo una funcionalidad para agregar a favoritos que funciona de la siguiente manera:

En aplicación.js:

 function handleAddFavourite(name){ const newFav = Object.values(Data).find(e => e.name === name) if(favourites.find((n)=>n.name === name)){ const newFavList = favourites.filter((n)=>n.name!==name) setFavourites(newFavList) } else { const newFavList = [...favourites,newFav]; setFavourites(newFavList) }

}

Aquí paso handleAddFavourite y favoritos en contexto a un niño anidado (SingleData).

La estructura de mi aplicación de reacción se puede ver como App.js(sends data to datafetched)-> DataFetched(receives data from data fetched and passes to singledata that is basically a row for every single data in data) -> singledata

En mi componente singledata, muestro datos en varias filas con un botón Agregar a favoritos que, al hacer clic con éxito, agrega los datos requeridos a favoritos.

singledata.js:

const {handleAddFavourite} = useContext(DataContext)

 const styleProp = (favourites.find((n)=>n.name === name))? "gold" : "white" <td> {last} </td> <td> <i class ="fa fa-star" style={{color:styleProp}} onClick={()=>handleAddFavourite(name)} /> </td>

Ahora, lo que quiero hacer con mi función Agregar a favoritos es que cada vez que se hace clic en un ícono de estrella, los datos se agregan a favoritos (ya funcionan) y el color de la estrella cambia a dorado. Para esto, mi idea era obtener la lista completa de fav en el componente singledata y verificar si los datos en fav luego cambiar el color de estilo de la estrella, pero el problema aquí es que la lista de favoritos se representa muchas veces para cada fila de datos que creo que es una mala práctica. Y no puedo encontrar una manera de resolver esto.

También lo mismo ocurre con la eliminación de favoritos, donde el color de la estrella vuelve a cambiar a blanco y los datos se eliminan de favoritos.