I am getting this error:

Error: Material-UI: The data grid ponent 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 ponent 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.

I am getting this error:

Error: Material-UI: The data grid ponent 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 ponent 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.

• javascript
• reactjs
• material-ui

2 Answers 2

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}

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

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