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:

user_13060047 0
Viewed 4993

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.

material-ui reactjs javascript
2 Answers

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}

Codesandbox Demo

user_94494260

When creating the new rows array you are missing spreading the previous array:

const handleNewJobCreation = (newRow) => {
    setRows([
        {...newRow},
        ...rows // <- missing spread operator
    ]);
}
user_40966140
Related