30:11 error Missing "key" prop for element in iterator react/jsx-key

[allomorphy]

Thanks for this great example.

I had to make the map loop static in order to compile around this error. Here is the way I did it.

It would be great if someone could suggest how to loop without such an error. Thanks a lot in advance 😊

  return (
    <svg width={width} height={height}>
      <g>
        <rect x={3} y={3 * barHeight} height={barHeight - 1} fill={theme.palette.greenBase} />
      </g>

      {/*
      Had to make this static to compile and not spew:
      30:11  error  Missing "key" prop for element in iterator  react/jsx-key
      <g>
        {values.map((value, i) => (
          <rect x={0} y={i * barHeight} width={scale(value)} height={barHeight - 1} fill={theme.palette.greenBase} />
        ))}
      </g>
      */}

[hettlage]

A solution should be to add a key attribute with the index value to the <rect> element:

<g>
        {values.map((value, i) => (
          <rect key={i} x={0} y={i * barHeight} width={scale(value)} height={barHeight - 1} fill={theme.palette.greenBase} />
        ))}
</g>

[zuchka]

sorry, what tutorial is this referencing?

[hettlage]

Think this is referring to

https://grafana.com/tutorials/build-a-panel-plugin-with-d3/

I think.