How to get the selected values in a DataGrid with React Material UI

I'm working with a React MUI DataGrid. I need to get the values of the selected rows. At the moment, only the ids are coming through, and I get several errors throughout.

rows = data;

const columns = [
  {
    field: "id",
    headerName: "ID",
    sortable: false,
    hide: true,
  },
  {
    field: "firstName",
    headerName: "First Name",
  },
  {
    field: "lastName",
    headerName: "Last Name",
  },
  {
    field: "age",
    headerName: "Age",
  }
];

This is my React Hook.

const [ selection, setSelection ] = useState<GridSelectionModel>([]);

And this is the DataGrid.

<div style={{ height: 400, width: "100%" }}>
     <DataGrid
      rows={rows}
      columns={columns}
      checkboxSelection
      getRowId={(row) => row.id}
      onSelectionModelChange={(newSelection) => {
              setSelection(newSelection);
              console.log("selection", selection)
            }}
      {...rows}
/>
</div>

This prints the id.

<p>{selection.map((data) => data)}</p>

But, what I need, and I'm not able to figure out is:

{selection.map((data) => {
     return (
        <div key={data.id}>. <---ERROR
          <p>{data.firstName}</p> <---ERROR
          <p>{data.lastName}</p> <---ERROR
        </div>
       )
     })}

When I do it this way, I get the following error: "Property does not exist on type 'GridRowId'."

Solution

selection will be an array of IDs instead of an array of items. You can remap the IDs back to your items, E.g,

data.json

[
  {
    "id": "id-001",
    "firstName": "First Name 1",
    "lastName": "Last Name 1",
    "age": 1
  },
  {
    "id": "id-002",
    "firstName": "First Name 2",
    "lastName": "Last Name 2",
    "age": 2
  },
  {
    "id": "id-003",
    "firstName": "First Name 3",
    "lastName": "Last Name 3",
    "age": 3
  },
  {
    "id": "id-004",
    "firstName": "First Name 4",
    "lastName": "Last Name 4",
    "age": 4
  },
  {
    "id": "id-005",
    "firstName": "First Name 5",
    "lastName": "Last Name 5",
    "age": 5
  }
]

App.tsx

import { useState } from "react";
import { DataGrid, GridSelectionModel } from "@mui/x-data-grid";
import data from "./data.json";

const columns = [
  {
    field: "id",
    headerName: "ID",
    sortable: false,
    hide: true
  },
  {
    field: "firstName",
    headerName: "First Name"
  },
  {
    field: "lastName",
    headerName: "Last Name"
  },
  {
    field: "age",
    headerName: "Age"
  }
];

// NOTE: Pulls in imported json data.
const rows = data;

export default function App() {
  const [selection, setSelection] = useState<GridSelectionModel>([]);

  return (
    <div>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          checkboxSelection
          gridRowId={(row) => row.id}
          onSelectionModelChange={setSelection}
          {...rows}
        />
      </div>
      <div>
        {selection
          .map((selectedId) => data.find((item) => item.id === selectedId))
          .map(({ id, firstName, lastName }) => (
            <div key={id}>
              <p>{firstName}</p>
              <p>{lastName}</p>
            </div>
          ))}
      </div>
    </div>
  );
}