MUI Group Select - Array of Array

Question

So I want to create a group MUI select and having some issues. I want to build the select options via data coming from an API.

const data = [
    {
      id: '1',
      name: 'Category 1',
      services: [
        {
          id: '1',
          name: 'Service 1',
        },
      ],
    },
    {
      id: '2',
      name: 'Category 2',
      services: [
        {
          id: '1',
          name: 'Service 1',
        },
      ],
    },
  ];

So I have the following react code but when when I select an option, nothing happens. So I am just not sure what I am doing wrong here.

<FormControl sx={{ m: 1, minWidth: 120 }}>
  <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
  <Select defaultValue="" id="grouped-select" label="Grouping">
    {data.map((cat) => (
      <div key={cat.id}>
        <ListSubheader>{cat.name}</ListSubheader>

        {cat.services.map((service, index) => {
          return (
            <MenuItem key={service.id} value={service.id}>{service.name}</MenuItem>
          );
        })}
      </div>
      ))}
    )
  </Select>
</FormControl>

Tamás Katona · Accepted Answer · 2024-01-19 11:18:18Z

5

You should not put any wrapper element around your list items (<div key={cat.id}>)

<Select defaultValue="" id="grouped-select" label="Grouping">
    {data.reduce((listItems, cat) => [
        ...listItems,
        <ListSubheader>
            {cat.name}
        </ListSubheader>,
        ...cat.services.map((service, index) => (
            <MenuItem key={service.id} value={service.id}>{service.name}</MenuItem>
        )),
    ], [])}
</Select>

edited Jan 19, 2024 at 11:18

answered Sep 14, 2022 at 9:15

Tamás Katona

8739 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stuart Over a year ago

This should be marked as the answer. It is correct and the solution works well. Although I will add that the cat.services.map(... is not closed correctly, you will need an additional parenthesis to close.

Collectives™ on Stack Overflow

MUI Group Select - Array of Array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related