Displaying error when building the app in Next.js

Question

When I run npm run build for a Next.js (React & Ts) I get the following error:

Error: Missing "key" prop for element in array react/jsx-key

This error points to the following code:

<GridActionsCellItem
  icon={<SaveIcon />}
  label="Save"
  sx={{
    color: "primary.main",
  }}
  onClick={handleSaveClick(id)}
/>

Answer 1

Add key property to component. Something like this:

    <GridActionsCellItem
      key={id}
      icon={<SaveIcon />}
      label="Save"
      sx={{
        color: "primary.main",
      }}
      onClick={handleSaveClick(id)}
    />

you can get more info here: https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key