CODEWITHSUNDEEP
reactjsmaterial-ui
Bastien Bastiens
Bastien Bastiens

Reputation: 419

How to avoid duplicates using material-ui autocomplete?

When using the autocomplete component in Material-UI, using a list of people [name, city, state ...] as data-source, Austin will be displayed twice. How can we ensure the list won't show duplicate data while still using the same data source?

const data = [
  {"id":1,"name":"bob", "city":"Austin","state":"TX"},
  {"id":2,"name":"bobb", "city":"Austin","state":"TX"},
  {"id":3,"name":"bobby", "city":"Dallas","state":"TX"},
]

const cityConfig = {
  text: 'city',
  value: 'city',
};

<AutoComplete
  floatingLabelText={'label'}
  dataSource={data}
  dataSourceConfig={cityConfig}
/>

Upvotes: 0

Views: 7654

Answers (1)

Daniel Andrei
Daniel Andrei

Reputation: 2684

As i said in my comment, the issue is not about AutoComplete but filtering your data to display.

You would have to iterate through your current dataSource and filter it by cities.

The following implementation uses ramda, a popular functional programming library.

const data = [
  {"id":1,"name":"bob", "city":"Austin","state":"TX"},
  {"id":2,"name":"bobb", "city":"Austin","state":"TX"},
  {"id":3,"name":"bobby", "city":"Dallas","state":"TX"},
]

const cities = uniq(map((item) => {
  return item.city;
}))(data);

So your dataSource becomes cities

Or you can do something else if you don't wanna use ramda and can use ES6 ... but this will return only the array of cities.

const a = [
  ...new Set(
    data.map((person) => { return person.city; })
  ),
];

There are multiple ways you can do this, it's up to your use case.

Upvotes: 2

Related Questions