No se puede agregar onclick a la ruta svg en el componente funcional React

Question

import React, { useEffect, useState } from "react";
import SVG from "react-inlinesvg";
import axios from "axios";

export default function App() {
  const [color, setColor] = useState("red");
  const [image, setimage] = useState(null);

  const fill = () => {
    setColor("green");
  };
  useEffect(() => {
    axios
      .get("https://file.qwertygo.com/media/image/cyan_qWYARBm.svg")
      .then(({ data }) => {
        setimage(
          [
            data.substring(0, data.search("currentcolor") + 13),
            ` onClick={fill()} `,
            data.substring(data.search("currentcolor") + 13)
          ].join("")
        );
      });
  }, []);
  return (
    <div className="App">
      {image && (
        <SVG
          src={image}
          onClick={() => alert("green")}
          style={{
            bottom: 0,
            right: 0,
            position: "absolute",
            color: color,
            background: "#000"
          }}
        />
      )}
    </div>
  );
}

Problema: quiero agregar la función fill () al evento onclick en alguna ruta especial. pero recibo este error después de hacer clic

Se esperaba que el onClickoyente fuera una función, en su lugar obtuvo un valor de stringtipo.

y este es el svg de salida:

<svg xmlns="http://www.w3.org/2000/svg" width="212" height="244" viewBox="0 0 212 244">
    <defs>
        <clipPath id="quebmie6fa">
            <path fill="none" stroke="#707070" d="M0 0H212V244H0z" transform="translate(235 143)"/>
        </clipPath>
    </defs>
    <g clip-path="url(#quebmie6fa)" transform="translate(-235 -143)">
        <path fill="currentcolor" onClick={fill()}  d="M424.413 141.66A183.073 183.073 0 0 0 241.34 324.733h139.35a43.723 43.723 0 0 1 87.445 0h139.35A183.073 183.073 0 0 0 424.413 141.66z" transform="rotate(-14 452.52 288.497)"/>
        <path d="M-419.71-981.787a184.43 184.43 0 0 1-5.317-36.7 182.149 182.149 0 0 1 2.037-35.924 183.1 183.1 0 0 1 8.855-34.257 184.4 184.4 0 0 1 15.136-31.7 184.393 184.393 0 0 1 20.881-28.245 183.1 183.1 0 0 1 26.09-23.9 182.158 182.158 0 0 1 30.763-18.664 184.426 184.426 0 0 1 34.9-12.535 183.84 183.84 0 0 1 44.431-5.482 182.2 182.2 0 0 1 36.685 3.741 183.411 183.411 0 0 1 34.685 10.834 184.485 184.485 0 0 1 31.712 17.342 184.062 184.062 0 0 1 27.767 23.265 182.161 182.161 0 0 0-127.848-52.183 183.849 183.849 0 0 0-44.432 5.482c-96.058 23.95-156.256 121.918-134.191 218.387l-2.153.537zm220.059-54.867a43.8 43.8 0 0 0-10-18.771 43.609 43.609 0 0 1 7.076 8.251 43.559 43.559 0 0 1 4.9 10.028l-1.974.492z" transform="translate(676.09 1356.532)" style="mix-blend-mode:multiply;isolation:isolate" fill="#bfbfbf"/>
    </g>
</svg>

Answer 1

escribe onClick={fill()}no onClick=${fill}le falta $signo y no agrega ()al final de la devolución de llamada, o puede usar onClick=${()=>fill()}en su lugar.

también en lugar de usar [...data...].join("")que convertirá todo en una cadena, puede usar:

setimage(
data.substring(0, data.search("currentcolor") + 13)+` onClick=${fill}`+data.substring(data.search("currentcolor") + 13)
)