Can you tell me that why I'm getting error "A component is changing an uncontrolled Autocomplete to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component."
component :
function AutoComplete(props) { const defaultProps = { options: props.options, getOptionLabel: option => option.name, }; const handleChange = (e, value) => { props.onChange(value); }; return ( <Autocomplete {...defaultProps} renderInput={params => ( <TextField {...params} label={props.label} margin="normal" /> )} onChange={handleChange} value={props.value} /> ); }
calling autocomplte:
<Controller control={control} name = 'country' as = { <AutoComplete options={countryOptions} onChange={selectCountryHandler} label="Country" value={selectedCountry || ''} /> } />
how can I solve this error?
The warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
When no value is selected, you need to add || null to prevent the Autocomplete going into uncontrolled mode: If you pass value= {undefined} to the Autocomplete component, it will start in "uncontrolled" mode, meaning it keeps its own internal state. Then if you later supply a value it raises the "A component is changing" error.
If you are starting with handling user inputs in React, you might have come across the following warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen.
Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Select element for the lifetime of the component. The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.
You ensured that the value property never had been undefined, but you had to do same for inputValue.
⚠️ These two state are isolated, they should be controlled independently.
Component becomes uncontrolled when inputValue property is undefined, and vice versa.
If in the following example you delete an empty string from React.useState('')
you'll get the same error message because inputValue during first render is undefined
.
import React from 'react' import TextField from '@material-ui/core/TextField' import Autocomplete from '@material-ui/lab/Autocomplete' const options = ['Option 1', 'Option 2'] export default function AutocompleteLab() { 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={(_, newValue) => { setValue(newValue) }} inputValue={inputValue} onInputChange={(_, newInputValue) => { setInputValue(newInputValue) }} options={options} style={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Name" variant="outlined" />} /> </div> ) }
I solved this by removing the default value
.
<Autocomplete multiple id="multiple-limit-tags" options={(option) => option.label} getOptionLabel={(option) => option} // defaultValue={options || []} renderInput={(params) => <TextField {...params} label="My Label" />} />
It wasn't obvious how to solve this, and the documentation doesn't help much either. I find it curious that a copy-pasted example from the documentation results in this error. I guess the example works because the choices are hard-coded.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With