stateNPAValue[formData.state.vale] = 0: "All",1: "959", 2: "203",3: "860", 4: "475" // API response for NPA data
const [selectedNamesState, setSelectedNamesState] = useState([]);
const transformedNpaData = stateNPAValue[formData.state.value].map((label, index) => ({
label,
value: index.toString() // You can use the index as the value or any unique identifier
}));
<Autocomplete
multiple
id="fixed-tags-demo"
name="Npa"
value={selectedNamesState}
onChange={(event, newValue) => {
setSelectedNamesState(newValue)
NPAHandler(newValue);
changeHandleStateErrorRemove(event)
}}
options={transformedNpaData}
getOptionLabel={(option) => option.label.replace(/[[]']+/g, '')}
defaultValue={[transformedNpaData[0].label]}
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
label={option.label.replace(/[[]']+/g, '')}
{...getTagProps({ index })}
/>
))
}
style={{ width: 500 }}
renderInput={(params) => <TextField {...params} label={formData.state.value} />}
isOptionEqualToValue={(option, value) => {
return option.value === value.value;
}}
/>
I wanted to select “All” as a default value in multiselect dropdown but defaultValue option is not working. Please let me know what is wrong with this code.