Material-UI AutoComplete Grouping logic does not honor duplicates

user_15431999 0
Viewed 1619

I am encountering a problem in grouping. Tried to sort it but what I need to grouped are data with nested children on it. And I wanted it to be grouped by its parent node. Would this be possible using AutoComplete?

data is like as follows:

[{
  name: "1"
  parent: null
      children: [
        {
          name: "1.1"
          parent: "1"
        },
        {
         name: "1.2"
         parent: "1"
       }
      ]
}]

with this kind of data it shows this error:

Material-UI: The options provided combined with the groupBymethod of Autocomplete returns duplicated headers. You can solve the issue by sorting the options with the output ofgroupBy.

Is there a way for me to have no duplicates and group them all by their specified parent?

material-ui reactjs
1 Answers

Extract children array from each element, then concatenate all children on one array and pass this array as groupBy argument, since each element of the children has parent prop.

To be like this:

Options

[
  {
    name: '1.1',
    parent: '1'
  },
  {
    name: '1.2',
    parent: '1'
  },
  {
    name: '2.1',
    parent: '2'
  },
  {
    name: '3.1',
    parent: '3'
  },
  {
    name: '3.2',
    parent: '3'
  }
];

groupBy

groupBy={(option) => option.parent}
user_117203210
Related