Initialize Checkbox Selection based on Array Values DataGrid MUI-CodePudding

I have a MUI Datagrid with 2 columns, ID and City Name, there are actually only 3 cities in the table. I have a citizen object like this:

const userMockup = {
  id: 1,
  name: "Citizen 1",
  cities: [1, 2],
  isAlive: true
};

The cities array in userMockup represents the cities in which the user lives (with their respective IDs).

I want the rows of the respective cities in which the user lives to be selected when the page loads, I read some DataGrid documentation but with my current code every row gets selected, I need only the rows with id 1 and 2 to be selected, since those are the user cities.

I suspect that something is wrong in the filter part of the selectionModel state.

Here is my code so far, hope you can help me!

CodePudding user response：

I think your row filtering logic needs a bit of adjustment. It should be:

rows.filter((r) => userMockup.cities.includes(r.id))