Estoy tratando de comparar el clic actual con hasClip en un mapa de reacción dado y vaciar el color si el resultado es idéntico al id y la categoría, mientras que si no es el mismo, relleno el color.

¿Puede alguien por favor ayudarme a averiguar cómo puedo resolver esto?

A continuación, tengo una matriz donde mapeo el tipo de clave de categoría y la identificación del elemento:

 const data = [ { keyType: "category", filtered: [ { _id: 1, name: "Stocks", paramValue: "stocks" }, { _id: 19, name: "Commodities", paramValue: "commodities" }, ], }, { keyType: "topics", filtered: [ { _id: 8, name: "Preferred stocks", paramValue: "preferred-stocks" }, { _id: 24, name: "Stocks", paramValue: "stocks" }, ], }, ]; const hasClip = [ { _id: 1, keyType: "category", name: "Stocks", paramValue: "stocks" }, { _id: 8, keyType: "topics", name: "Preferred stocks", paramValue: "preferred-stocks", }, ]; const handleFill = (hasClip, category, id) => { checkKeyword(hasClip, category, id); }; const checkKeyword = (hasClip, category, id) => { const result = hasClip.some( (item) => item._id === id && item.keyType === category ); return result; }; const par = () => { return ( <> {data.map((category) => ( <> <h1 key={category.keyType}>{category.keyType}</h1> {category.filtered.map((item) => ( <styledComp key={item._id} onClick={() => { handleFill(hasClip, category.keyType, item._id); }} $clip={checkKeyword(hasClip, category.keyType, item._id)} > {item.name} </styledComp> ))} </> ))} </> ); }; export default par; const styledComp = styled.div` width: 50px; height: 50px; background-color: ${({ $clip }) => ($clip ? "red" : "none")}; `;