Error: Material-UI: The data grid component requires all rows to have a unique id property. A row was provided without id in the rows prop:

Question

I am getting this error:

Error: Material-UI: The data grid component requires all rows to have a unique id property.
A row was provided without id in the rows prop:

When I add a new row to my rows in the DataGrid component using:

const handleNewJobCreation = (newRow) => {
    setRows([
        {...newRow},
        rows
    ]);
}

However, I can see that all my rows do have the id property inside the dataset, I was wondering how can I fix this issue to be able to get append new data to the rows.

Answer 1

Your row objects are missing the id property as the error message said. You need to add the id prop with a unique value to remove the error. If you have a unique field that does not have the name id, you need to add a getRowId callback to return the correct id for every row:

<DataGrid getRowId={row => row.yourUniqueField}