# MUI: Fix Data Grid Requires a Unique id Error

> Fix the MUI X Data Grid error requiring a unique id property on each row using the getRowId prop or the Web Crypto randomUUID method

**URL:** https://sentry.io/answers/the-data-grid-component-requires-all-rows-to-have-a-unique-id-property/

---

## The Problem

When using the [MUI X Data Grid component](https://mui.com/x/react-data-grid/) React data table you may get the following error:

```
gridRowsUtils.js:27 Uncaught Error: MUI X: The data grid component requires all rows to have a unique `id` property.
Alternatively, you can use the `getRowId` prop to specify a custom ID for each row.
A row was provided without ID in the rows prop:
```

## The Solution

Make sure each row has a unique `id` property. This `id` is used by the Data Grid to identify the row and track the row across updates, enabling optimized rendering and performance.

For example, the following Data Grid would cause the above error, because its rows don't have an `id` property:

```tsx
<DataGrid
  columns={[{ field: 'name' }]}
  rows={[
    { _id: 1, name: 'John' },
    { _id: 2, name: 'Kate' },
  ]}
/>
```

Although the example code above doesn't include an `id` property, each row has a unique `_id` property. You will see that data from MongoDB databases also has the `_id` property.

If your rows have a different identifier property, you can use the `getRowId` prop to set the unique row `id`:

```tsx
<DataGrid
  columns={[{ field: 'name' }]}
  rows={[
    { _id: 1, name: 'John' },
    { _id: 2, name: 'Kate' },
  ]}
  getRowId={(row) => row._id}
/>
```

If, however, your rows of data don't have a unique identifier, you'll need to create your own row identifiers. To generate unique identifiers client-side, you can use the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Crypto) that's accessed through the global [`crypto`](https://developer.mozilla.org/en-US/docs/Web/API/crypto_property "crypto") property. It's a `Crypto` object with a [`randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) method that returns a randomly generated UUID. In Node, you can use the [`randomUUID()`](https://nodejs.org/api/crypto.html#cryptorandomuuidoptions) method of the Node [`crypto` module](https://nodejs.org/api/crypto.html#nodecrypto-module-methods-and-properties).

Note that you should avoid generating unique identifiers that change for a given row, because this leads to issues with other features of the Data Grid. Ideally, your database data should have a unique field to use as a unique identifier.

## Catching This Error in Production

This error is thrown as an uncaught exception, so if it slips past testing, it will crash the Data Grid for real users without a stack trace showing up anywhere you're watching. [Error monitoring](https://sentry.io/product/error-monitoring/) captures these uncaught errors automatically, with the full component stack and the row data that triggered them, so you can find and fix a missing `id` property before it affects most users.

---

*Source: [sentry.io/answers/the-data-grid-component-requires-all-rows-to-have-a-unique-id-property/](https://sentry.io/answers/the-data-grid-component-requires-all-rows-to-have-a-unique-id-property/)*