CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
ashes999
ashes999

Reputation: 1324

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:

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.

Upvotes: 3

Views: 8075

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81340

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

Upvotes: 3

David I. Samudio
David I. Samudio

Reputation: 2693

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

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

Upvotes: 1

Related Questions