Estoy tratando de cambiar el color de los elementos svg comparando las identificaciones de los elementos con una matriz. Obtengo los resultados de comparación correctos al hacer un bucle de las identificaciones de todos los elementos disponibles y compararlos con los datos de la matriz. Sin embargo, no puedo colorear dinámicamente el elemento comparado.
Esto es lo que he intentado hasta ahora: CodeSandBox
import React from "react"; import "./App.css"; import NewTestColor from "./NewTestColor"; const App = () => { const data = [ { id: "D", hmc: "", lmc: "low" }, { id: "B", hmc: "high", lmc: "" }, { id: "A", hmc: "high", lmc: "" }, { id: "C", hmc: "", lmc: "low" } ]; const addEventListener = ("mouseup", (e) => { // Let's pick a random color between #000000 and #FFFFFF const rnd = Math.round(Math.random() * 0xffffff); // Let's format the color to fit CSS requirements const fill = "#" + rnd.toString(16).padStart(6, "0"); // Let's apply our color in the // element we actually clicked on e.target.style.fill = fill; const id = e.target.getAttribute("id"); console.log(id); console.log(fill); // console.log(data); }); // const Ndata = data.filter(task => task.hmc === "high") // .map(filteredData => {filteredData.id}, {filteredData.hmc}, {filteredData.color} ) const FilteredData = data.filter((e) => e.hmc.includes("high")); const OnlyIp = FilteredData.map((e) => `${e.id} ${e.hmc}`); // console.log(OnlyIp) console.log(FilteredData); return ( <div> <NewTestColor onClick={addEventListener} items={FilteredData} /> </div> ); }; export default App;El problema es que si define onClick como accesorio en un componente que definió, no funciona. Debe agregarlo a un elemento real como svg .
Cambie NewTestColor para pasar a la función onClick a svg externo
const NewTestColor = ({ onClick }) => ( <svg viewBox="0 0 210 297" height={500} width={500} onClick={onClick}> ... ... ... </svg> ); Y la función addEventListener en App.js debería verse como a continuación.
const addEventListener = (e) => { // Let's pick a random color between #000000 and #FFFFFF const rnd = Math.round(Math.random() * 0xffffff); // Let's format the color to fit CSS requirements const fill = "#" + rnd.toString(16).padStart(6, "0"); // Let's apply our color in the // element we actually clicked on e.target.style.fill = fill; const id = e.target.getAttribute("id"); console.log(id); console.log(fill); // console.log(data); };