Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property

Question

Here's the component:

export const GradeTable = (props: GradeTableProps) => {
  console.log('GradeTable');
  console.log(props.rows);
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={props.rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
}

I have each row assigned a unique id but I still get the error.

I also tried to add getRowId={(row) => row.studentId} as it's commonly suggested on StackOverflow but it's the same error. I don't understand why.

Answer 1

You may simply need to use the getRowId prop to specify the key in your data for obtaining the id.