I dont know why, why I am having this kind of error MUI: A component is changing the default value state of an uncontrolled Autocomplete after being initialized. To suppress this warning opt to use a controlled Autocomplete. is there anything wrong with my code? please help thanks
LocationSearch.js
const propTypes = {
defaultValue: PropTypes.String,
getOptionLabel: PropTypes.func,
value: '',
}
const defaultProps = {
defaultValue: '',
getOptionLabel: () => {},
}
const AutoCompleteSearch = ({
defaultValue,
getOptionLabel,
})
....
return(
<Autocomplete
defaultValue={defaultValue}
getOptionLabel={getOptionLabel}
/>
)
//parent
AddUser.js
import {LocationSearch} from '../../component/LocationSearch.js'
<LocationSearch
freeSolo
getOptionLabel={(option) => option} // the value of option is the name of the company
defaultValue={threatLocation.title} //same goes with the defaultValue
value={suggestedLocations.title}
/>
Given the LocationSearch signature provided in AddUser, you need to change both:
defaultValue to be a string
Per the mui Autocomplete API, it is of type any. Since you seem to infer it to be a string, you should probably change its type in the prop types.
getOptionLabel to add input parameter and return value. Its signature is defined in mui Autocomplete API like so
Signature: function(option: T) => string
The overall changes look like this:
const propTypes = {
defaultValue: PropTypes.string,
getOptionLabel: PropTypes.func,
}
// default string values are up to you
const defaultProps = {
defaultValue: "",
getOptionLabel: (option : string) => "",
}
It's because you're using defaultValue.
In a controlled component, data is handled by the Autocomplete component via callbacks. The alternative is uncontrolled components, where data is handled by the DOM itself. Controlled vs uncontrolled components is discussed in React documentation.
As of your code, MUI Autocomplete Doc says:
The default value. Use when the component is not controlled.
To have controlled Autocomplete component, you should use onOpen, onChange callbacks and remove defultValue. An example can be found in MUI Autocomplete demo:
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export default function ControllableStates() {
const [value, setValue] = React.useState(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div>
<div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
<div>{`inputValue: '${inputValue}'`}</div>
<br />
<Autocomplete
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Controllable" />}
/>
</div>
);
}
Note: you should not remove your questions once they are answered. Even if you have many of them in your post. It confuses future readers.