Estoy usando este Autocompletar un par de veces. Sin embargo, tengo estos estados de uso que deben definirse, por lo que estoy bastante confundido sobre cómo puedo hacer que esto sea un componente reutilizable.
<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" />} />Probablemente podría intentar extraer del componente lo que lo hace específico, de modo que siga siendo genérico pero aún tenga la capacidad de ver la personalización inyectada en él. Es posible que el código a continuación no sea del todo correcto, pero lo que importa es la idea general
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} />