CODEWITHSUNDEEP
reactjsmongodbmaterial-ui
Michael McDermott
Michael McDermott

Reputation: 374

Populating Material-UI DataGrid from MongoDB failing for unique ID not found

Error: Material-UI: The data grid component requires all rows to have a unique id property. A row was provided without in the rows prop is what I am seeing when I call the table.

Here is how I have the table defined.

const columns = [
  { field: "_id", hide: true },
  { field: "user", headerName: "User", width: 70 },
  { field: "fromaddress", headerName: "Sender", width: 70 },
  { field: "dkimSpfChk", headerName: "DKIM/SPF", width: 70 },
  { field: "replySenderMismatch", headerName: "Reply MisMatch", width: 70 },
  { field: "riskywordchk", headerName: "Risky Word", width: 70 },
  { field: "domainagechk", headerName: "Sender Domain Age", width: 70 },
  { field: "attachmentChk", headerName: "Attachments", width: 70 },
  { field: "riskyLinkAge", headerName: "Body Link Age", width: 70 },
  { field: "riskyLinkTypo", headerName: "Link Typosquatting", width: 70 },
  {
    field: "senderTypoSquatting",
    headerName: "Sender TypoSquatting",
    width: 70,
  }
];

I get the data from my api and then populate in the row

 useEffect(() => {
    var apiurl = "http://localhost:5000/adminportal/highRiskEmails";
    axios
      .get(apiurl)
      .then((response) => response.data)
      .then((data) => {
        setIsLoaded(true);
        setRowData(data);
      });
  }, []);

Here is the datagrid

return (
  <div style={{ height: 400, width: "100%" }}>
    <DataGrid
      rows={rowData}
      columns={columns}
      id="_id"
      pageSize={15}
      checkboxSelection
    />
  </div>
);

I know the _id field is unique from Mongo so wondering what I am missing. Do I have to define that the id field is not id but _id?

thanks

Upvotes: 19

Views: 30366

Answers (6)

Cristian Romero
Cristian Romero

Reputation: 55

In my case in the back-end i changed the return object json

id_inspeccion

to

id

So in the frontend when the table gets the data, it will associate "id" and it will automatically work

Upvotes: 0

Mauricio Afonso
Mauricio Afonso

Reputation: 31

I just put the option { virtuals: true } in my schema:

const opts = { toJSON: { virtuals: true } };

const schema = new mongoose.Schema({
    lastName: String,
    firstName: String,
    nickname: String,
}, opts);

So when i try to query, the field "id" is added. Something like:

[
    {
        "_id": "602fc7aba323ec87f00f9c76",
        "lastName": "Targaryen",
        "firstName": "Daenerys",
        "nickname": "",
        "__v": 0,
        **"id": "602fc7aba323ec87f00f9c76"**
    }
]

Upvotes: 3

Ben Stickley
Ben Stickley

Reputation: 2120

You can now use the getRowId property that accepts a function to specify which property on each row should be considered the id.

In the OP's case, you could do: getRowId={(row) => row._id}

Reference: https://github.com/mui-org/material-ui-x/pull/972

Upvotes: 56

Scott Mitchell
Scott Mitchell

Reputation: 698

You do not want to create unable keys. Just add an actual id into the row records.

Upvotes: 0

Morgan Smith
Morgan Smith

Reputation: 301

I was having a hard time with this too, turns out you can make virtual ids

https://mongoosejs.com/docs/tutorials/virtuals.html

Upvotes: 2

Mohamed Jadib
Mohamed Jadib

Reputation: 27

I actually had the same problem on my DataGrid component and I solved it with math.random() as an id >> <DataGrid id={Math.random()} />

Upvotes: 1

Related Questions