Looking to implement unique options in the dropdown menu of an Autocomplete component from Material UI based on a specific property within a list of objects.
The current issue is that duplicate values are appearing in the dropdown, like
['Color1', 'Color2', 'Color1', 'Color2']['Color1', 'Color2'].
List of objects being used:
options = [
{
id: 1,
name: 'Name1',
color: 'Color1'
},
{
id: 1,
name: 'Name2',
color: 'Color2'
},
{
id: 1,
name: 'Name3',
color: 'Color1'
},
{
id: 1,
name: 'Name4',
color: 'Color2'
},
]
Here's the code for the Autocomplete component:
<Autocomplete
freeSolo
value={initialTasting}
options={options}
getOptionLabel={option => option.color}
filterOptions={(options, state) => options}
onChange={(e, value) => {setFieldValue('color', value.color)}}
renderInput={params => (
<TextField
{...params}
label={'Color'}
variant='outlined'
margin='dense'
fullWidth
/>
)}
/>
Omitted additional code due to length, which includes Formik, Yup validations, and other child components.
Having trouble implementing the desired unique option functionality using the filterOptions prop. Any assistance with JavaScript would be greatly appreciated!
Thank you in advance.