I am using this Autocomplete a few times. However I have this useStates that needs to be defined so I'm quite confused on how I can make this as a reusable component?
<Autocomplete
required
value={firstName}
onChange={(event, newValue) => {
if (typeof newValue === "string") {
setFirstName(newValue);
} else if (newValue && newValue.inputValue) {
// Create a new value from the user input
setFirstName(newValue.inputValue);
} else {
setFirstName(newValue);
}
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
id="free-solo-with-text-demo"
options={data}
getOptionLabel={(option) => {
// Value selected with enter, right from the input
if (typeof option === "string") {
return option;
}
// Add "xxx" option created dynamically
if (option.inputValue) {
return option.inputValue;
}
// Regular option
return option.firstName;
}}
renderOption={(props, option) => <li {...props}>{option.firstName}</li>}
sx={{ width: 300 }}
freeSolo
renderInput={(params) => <TextField {...params} label="First Name" />}
/>
You could probably try to extract from the cuomponent what is making it specific, so ti remains generic but still has the ability to see customisation injected into it ? The code below might not all be right but it's the general idea that matters
const [ firstName, setFirstName] = useState('')
const handleChange = (event, newValue) => {
if (typeof newValue === "string") {
setFirstName(newValue);
} else if (newValue && newValue.inputValue) {
// Create a new value from the user input
setFirstName(newValue.inputValue);
} else {
setFirstName(newValue); }
}
}
const handleOptionLabel = (option) => {
// Value selected with enter, right from the input
if (typeof option === "string") {
return option;
}
// Add "xxx" option created dynamically
if (option.inputValue) {
return option.inputValue;
}
// Regular option
return option.firstName;
}
}
const handleRenderOption = (props, option) => {
<li {...props}>{option.firstName}</li>
}
const handleRenderInput = (params) =>{
<TextField {...params} label="First Name" />
}
<Autocomplete
required
value={firstName}
onChange={handleCHange}
selectOnFocus
clearOnBlur
handleHomeEndKeys
id="free-solo-with-text-demo"
options={data}
getOptionLabel={handleOptionLabel}
renderOption={handleRenderOption}
sx={{ width: 300 }}
freeSolo
renderInput={handleRenderInput}
/>