score:1

Accepted answer

if you want your children to provide state to the parent, then you need to pass down a function for them to call when they are clicked.

so in the parent, you maintain state with:

const [currentsvg, setcurrentsvg] = usestate();

then when you call your child element, pass in a function as a prop.

 <item id="1" onclick={(id) => setcurrentsvg(id)} name="svg 1" />

then in your child, take the function out of the props and put it on the click handler of the div that holds your svg. then onclick, call the function that you passed in:

const items = ({ onclick, name, id }) => {
  return (
    <styledsvgdiv onclick={() => onclick(id)}>
      {name}
      <svg width="100" height="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="green"
          strokewidth="4"
          fill="yellow"
        />
      </svg>
    </styledsvgdiv>
  );
};

example: https://oh23w.csb.app/


Related Query

More Query from same tag