MUI 5 Autocomplete choose attribute of object as value - reactjs

Question

My options looks like this
const options = [
{
"VaccinationType": "Sample"
},
{
"VaccinationType": "Another Sample"
}
]
Code:
const [vacType, setVacType] = useState('');
<Autocomplete
value={vacType}
onChange={(e, value) => {
console.log(value);
setVacType(value);
}}
options={options}
getOptionLabel={(option) => option.VaccinationType}
isOptionEqualToValue={(option, value) => option.VaccinationType === value.VaccinationType}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
size="small"
/>
)}
/>
I tried logging my value it still outputs the object { VaccinationType: "Sample" }. I want it to only output "Sample"
In MUI 4 I'm using this getOptionSelected={(option, value) => option?.VaccinationType === value?.VaccinationType}

Answer 1

Autocomplete options care about the item of the array which you put. According to your code, each item has all object values.
I searched to find a way but I couldn't.
There is a way probably you already thought;
You can edit options parameter like options={options.map(o => o.VaccinationType)} and remove VaccinationType key on getOptionLabel and isOptionEqualToValue
<Autocomplete
value={vacType}
onChange={(e, value) => {
console.log(value);
setVacType(value);
}}
options={options.map(o => o.VaccinationType)}
getOptionLabel={(option) => option}
isOptionEqualToValue={(option, value) =>
option === value
}
renderInput={(params) => (
<TextField {...params} variant="outlined" size="small" />
)}
/>

Answer 2

So I think u forgot to use onInputChange and InputValue properties for MUI Autocomplete, according to https://mui.com/material-ui/react-autocomplete/ these properties are needed in this case here u can read more https://mui.com/material-ui/api/autocomplete/ so please check this solution which works for me:
const [vacType, setVacType] = useState<any>('Sample')
const [inputValue, setInputValue] = useState('Sample')
const options: any[] = [
{
VaccinationType: 'Sample'
},
{
VaccinationType: 'Another Sample'
}
]
<Autocomplete
value={vacType} //here u set default Value and change whenever it changes a list choice
inputValue={inputValue} //here u set default Input and change whenever it changes by typing
onChange={(event: any, newValue: any | null) => {
setVacType(newValue)
}}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue)
}} // handles typing
options={options}
getOptionLabel={(option: { VaccinationType: string }) => {
return option?.VaccinationType
}}
isOptionEqualToValue={(option, value) =>
option?.VaccinationType === value?.VaccinationType
}
renderInput={params => (
<TextField {...params} variant="outlined" size="small" />
)}
/>
Hope it helps!
Also to answer your problem with console.log
your code:
onChange={(e, value) => {
console.log(value);
setVacType(value);
}}
exchanged to :
onChange={(event: any, newValue: any | null) => {
console.log('newValue')
console.log(newValue)
setVacType(newValue)
}}
gives object but you on this Autocomplete provide objects then seting values is in objects so u just need to add console.log(newValue.VaccinationType) but not for setVacType(newValue) and Autocomplete will remember last choice

Answer 3

I don't know why you want to do that!,
You can simply use value object wherever you want, and use any key of the object, take the value object as it's then use value.VaccinationType.
But, if you want to do this:
<Autocomplete
{...props}
value={options.find(op => op.VaccinationType === vacType)}
onChange={(e, value) => {
console.log(value); //Result: { "VaccinationType": "Sample" }
setVacType(value.VaccinationType); // <==== Here, add `.VaccinationType`
}}
/>