Maximum call stack exceeded in Mui DataGrid React

Question

I have multiple DataGrid tables in my project, but I cannot figure out what is wrong with this one.

I have created a codesandbox example of my problem. If anyone could help I would appreciate it very much.

It is probably a dumb mistake

codesandbox example

I just answered this question here. https://stackoverflow.com/questions/71680527/i-cannot-have-two-or-more-fields-with-the-same-name-when-creating-columns-in-a/73087360#73087360 — Kushal, Jul 23 '22 at 01:10

score 13 · Accepted Answer · answered Jul 08 '22 at 12:03

13

You have declared a field with name license 2 times.

Changing to e.g.

  {
    field: "licence",
    headerName: "Licence start",
    flex: 1,
    valueGetter: (params) =>
      `${moment(params.row.licence.startsAt).format("DD.MM.YYYY") || ""}`
  },
  {
    field: "licence2",
    headerName: "Licence ends at",
    flex: 1,
    valueGetter: (params) =>
      `${moment(params.row.licence.endsAt).format("DD.MM.YYYY") || ""}`
  },

will solve the problem

answered Jul 08 '22 at 12:03

Apostolos

10,033
5
24
39

1

I also had the same problem, I was also using same field name for two times. changing the duplicate field name solved the problem. – Dinuka Dilshan Dec 21 '22 at 06:15

score 1 · Answer 2 · answered Jul 23 '22 at 01:12

You can use the params.id to look for that particular element in the valueGetter function and then return it. I've answered a similar question here.

const columns = React.useMemo(
 () => [
   ..., // all the other elements


   // No changes needed here since this is the first occurrence of 'details'
   {
     field: 'details',
     headerName: 'Ready By',
     type: 'datetime',
     valueGetter: ({ value }) => value.ready_by && new Date(value.ready_by),
     width: 250,
   },

    // Here we're basically searching for the item of interest since we do get `id` as a param arg.
   {
     field: 'details2',
     headerName: 'Name',
     valueGetter: ({ id }) => {
       const item = data.find(item => item.id === id);
       return item.name;
     },
     width: 250,
   },

 ],
[data]

)

score 0 · Answer 3 · answered Jul 08 '22 at 12:50

so the error is because you’re having those bothe fileds at the time (same name),

{
    field: "licence",
    headerName: "Licence start",
    flex: 1,
    valueGetter: (params) =>
      `${moment(params.row.licence.startsAt).format("DD.MM.YYYY") || ""}`
  },
  {
    field: "licence",
    headerName: "Licence ends at",
    flex: 1,
    valueGetter: (params) =>
      `${moment(params.row.licence.endsAt).format("DD.MM.YYYY") || ""}`
  },

removing one of them will solve your issue , you need to make sure how to access the date in other way

score 0 · Answer 4 · answered Sep 17 '22 at 04:37

I am resolved with this solution:

{ field: 'id', headerName: 'No', flex: 0.3, minWidth: 50 },
    {
      field: 'displayName',
      headerName: 'Name',
      flex: 1.2,
      minWidth: 160,
      renderCell: ({ id }) => {
        const item = users.find(item => item.id === id);
        return (
            <>
              <Avatar alt="avatar" src={item.avatarUrl} />
              <span className="list-user-name" onClick={handleShowDetailUser}>
              {item.displayName}
            </span>
            </>
        );
      },
    },

Maximum call stack exceeded in Mui DataGrid React

4 Answers4