How to specify row id property for DataGrid MaterialUI component?

Question

JavaScript

I'm trying to use the DataGrid component from MaterialUI in my ReactJS project. When I try to display data in a table, I get an error:

Unhandled Rejection (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:
[{"id":1,"title":"test","comment":"test problem","status":"OPEN"},{"id":2,"title":"another","comment":"another problem","status":"OPEN"}

I do everything according to the model from the official documentation for Material, I only get rows from the rest-api. Django-Rest-Framework gives me the following json:

{
    "tickets": [
        {
            "id": 1,
            "title": "test",
            "comment": "test problem",
            "status": "OPEN"
        },
        {
            "id": 2,
            "title": "another",
            "comment": "another problem",
            "status": "OPEN"
        },
        {
            "id": 3,
            "title": "another ticket about problem",
            "comment": "problem description",
            "status": "open"
        },
        {
            "id": 4,
            "title": "just another ticket about problem",
            "comment": "problem description",
            "status": "open"
        }
    ]
}

It is possible to work with data through ul / li, but not through a beautiful plate.
Component code:

render () {
    const {error, isLoaded, items} = this.state;

    const columns = [
      { field: 'id', headerName: 'ID', width: 70 },
      { field: 'title', headerName: 'Title', width: 130 },
      { field: 'user.username', headerName: 'Username', width: 130 },
      { field: 'status', headerName: 'Status', width: 90 }
    ];

    const rows = [items.map(item => item)];
    


    if (error) {
      return <Typography variant="h6" color="error">{error.message}</Typography>;
    } else if (!isLoaded) {
      return <Typography variant="h6" color="secondary">Loading...</Typography>;
    } else {
      /*return (
        <ul>
          {items.map(item => (
            <li>{item.id} {item.title}</li>
            )
          )}
        </ul>
      );*/
      console.log(rows);
      return <DataGrid rows={rows} columns={columns}></DataGrid>;
    }
  }

How to tell DataGrid that row id is "id" field? And what about in the case of such nesting, when I only need its username from the user object?

"tickets": [
        {
            "id": 1,
            "title": "test",
            "comment": "test problem",
            "status": "OPEN",
            "user": {
                "id": 2,
                "username": "notadmin",
                "first_name": "",
                "last_name": "",
                "email": ""
            }
        },
        {
            "id": 2,
            "title": "another",
            "comment": "another problem",
            "status": "OPEN",
            "user": {
                "id": 1,
                "username": "admin",
                "first_name": "",
                "last_name": "",
                "email": ""
            }
        }
]

Answer 1

const rows = [items.map(item => item)];

What is it and why? You obviously don't understand what you're doing here. Pass items to the DataGrid as is, no need to deal with nonsense.

And what about in the case of such nesting, when I only need its username from the user object?

But what about

I do everything according to the model from the official documentation for Material

??
There, in the documentation, there is an example of how to slip values ​​that are not directly in the string object. Add to the column definition . valueGetter: params => params.row.user.username