import React from 'react'
import TextField from '@material-ui/core/TextField';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
const App = () => {
const fixedOption = ['Gourav']
const myOptions = [
'Gourav', 'Niharika', 'kartik',
'Madhuri', 'Karishma', 'Dinesh'
];
const [value, setValue] = React.useState(fixedOption);
return (
<div style={{ marginLeft: '40%', marginTop: '60px' }}>
<h3>Greetings from GeeksforGeeks!</h3>
<Autocomplete
multiple
id="fixed-tags-demo"
value={value}
onChange={(event, newValue) => {
setValue([
...fixedOption,
...newValue.filter((option) => fixedOption.indexOf(option) === -1),
]);
}}
options={myOptions}
getOptionLabel={(option) => option}
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
label={option}
{...getTagProps({ index })}
disabled={fixedOption.indexOf(option) !== -1}
/>
))
}
style={{ width: 450 }}
renderInput={(params) => (
<TextField {...params}
label="Fixed Option Demo"
variant="outlined"
placeholder="Enter Option" />
)}
/>
</div>
);
}
export default App