Build a plugin Tuto - error

[Steffanou]

If I follow step by step the tutorial here : https://grafana.com/tutorials/build-a-panel-plugin/

the last part generate a build error when replacing

        <g>
          <circle style={{ fill: color }} r={100} />
        </g>

by

        <g fill={color}>
          {radii.map((radius, index) => {
            const step = width / radii.length;
            return <circle r={radius} transform={`translate(${index * step + step / 2}, 0)`} />;
          })}
        </g>

This raise the message error Missing "key" prop for element in iterator react/jsx-key
while doing the yarn dev build

[Steffanou]

The error goes away if I change

return <circle r={radius} transform={`translate(${index * step + step / 2}, 0)`} />;

by

return <circle  key={index} r={radius} transform={`translate(${index * step + step / 2}, 0)`} />;

You should note that in the svg block the line viewBox= changed between the plugin original and the last element of the tutorial to get the circle in the right place.