How to store values from Material-UI's Autocomplete into React's state. Autocomplete uses multiselect and has Array of strings as value.
1 Answers
Example with a functional component
In this example we will show an Autocomplete Component with multiple select and checkboxes for each option.
Define state with initial value (In our case: Empty Array):
const [ndl, setNdl] = React.useState([]);
Options which we can select:
const ndlExample = ['Berlin', 'München', 'Saarbrücken', 'Köln'];
Autocomplete Component:
<Autocomplete
multiple
value={ndl}
id="areaFilterId"
options={ndlExample}
limitTags={1}
disableCloseOnSelect
getOptionLabel={option => option}
onChange={(event: any, value: string[] | null) => setNdl(value)}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
{option}
</React.Fragment>
)}
style={{ width: 280 }}
renderInput={params => <TextField {...params} variant="standard" label="Niederlassung" />}
/>
Related