SelectInput react admin to filter duplicate values in choices and display only unique values

Question

I am using react-admin SelectInput and uses name as options but there are in the list that has the same name so the option shows duplicate values. I have tried doing research about filtering duplicate values but I can't seem to make it work.

My data looks like this:

data: [{name: "car1",id: 1,}, {name: "car1",id: 2,}, {name: "car2",id: 3,}]

Select options will display: car1, car 1, car 2 I want to display no duplicate: car1, car2

Here is my code:

<SelectInput optionText={<Choice/>}/>

const Choice = ({...record}) => {
    return(
        <span>{`${record && record.record.carName}`}</span>
    )
}

It allows me to play with the select options below like this and it display "test" so I think it can be done here but I cant find a good logic to implement the filter. Anyone has any idea? I'd greatly appreciate it!

 `${record && record.record.carName}` !== 'car1'  ?  <span>test</span> : null

I would suggest filtering out the data before passing it to <SelectInput />. Instead of filtering it within the choice itself. — zecuria
– zecuria, Commented Sep 7, 2021 at 2:48

Sanish Joseph · Accepted Answer · 2021-09-07 02:58:08Z

1

You may filter with Set. Set stores only unique values. We filter the data based on whether the name already exists in the Set or not. I hope you don't care about the id. As the first item will remain and the last items will be removed as duplicates. Hope the idea is clear.

    let s = new Set();
    let newData =  data.filter(d => {
      if (!s.has(d.name)) {
        s.add(d.name);
        return d;
      }
    });

answered Sep 7, 2021 at 2:58

Sanish Joseph

2,2763 gold badges18 silver badges33 bronze badges

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

1 Comment

Jan Dohinog Over a year ago

Thank you guys! I only thought of doing it in the choices since I feel like it's a bit more complicated to implement filter in the data with react-admin but I'll try and see if I can make it work

zecuria · Accepted Answer · 2021-09-07 03:01:05Z

1

If all you want is that there are no duplicates in the selection, I would suggest that you filter them before sending them to SelectInput.

You can do this by the following:

const data = [{name: "car1",id: 1,}, {name: "car1",id: 2,}, {name: "car2",id: 3,}];

const uniqueChoices = data.reduce((acc, choice) => {
  if (acc.some(item => item.name === choice.name) {
    return acc;
  }
  return [...acc, item]
}, []);

<SelectInput choices={uniqueChoices} />

answered Sep 7, 2021 at 3:01

zecuria

7884 silver badges10 bronze badges

Collectives™ on Stack Overflow

SelectInput react admin to filter duplicate values in choices and display only unique values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related