React: Warning, a component is changing an uncontrolled input to be controlled

Question

I'm using Google maps address autocomplete in my React app. It works by hooking into an input element, watching for changes, and providing a dropdown location select.

Relevant code:

<InputGroup hasValidation className="mb-3">
    <FormControl id="autocomplete"/>
</InputGroup>

useEffect(() => {
        
    // only specify the fields we need, to minimize billing
    const options = {"fields": ["address_components"]}

    const autocompleteElement = document.getElementById("autocomplete")

    if(autocompleteElement) {

        autocomplete.current = new google.maps.places.Autocomplete(autocompleteElement, options);
            
        const listener = autocomplete.current.addListener("place_changed", placeSelected);
        return function cleanUp() {
            google.maps.event.clearInstanceListeners(listener);
        }
    } else {
        // nothing to do yet
        return;
    }
});

However, I'm getting a warning in the browser console:

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

Seems obvious enough- the autocomplete functionality is changing the input itself as opposed to using react state to make a controlled component. However that's the way I want it. Is there a way I can silence this error? I've tried adding an empty defaultValue and an empty onChange function, but still got the error. Thanks in advance!

(There were a few questions with the same issue, but nothing about deliberately disabling the warning)

Sooo, any news? Just curious, cause I'd like to close the tab ;) — , Apr 12 '22 at 11:20
@ChrisG Heh, sorry to keep your tabs open. value="" makes it so that I can't type in the field. I also tried going all the way and setting up state and value and onChange attributes, and that doesn't work either. — Nathan, Apr 12 '22 at 18:17

score 9 · Answer 1 · answered Apr 18 '22 at 20:35

I have faced such warnings on a couple of projects here is one of the causes and solution.

const [value, setValue] = useState("");

<input value={value} onChange={inputHandler} />

From the code above notice that the state initial value is "", check yours. Its possible you are using null or empty value.

You need to change it to empty string and that warning will disappear.

Let me know if its helpful.

score 4 · Answer 2 · answered Oct 21 '22 at 06:36

We cleared this error by simply adding default values to our form inputs:

<p style={{ fontWeight: 'bold' }}>Devices: </p>{' '}
<Select
    isMulti
    value={mapValuesToSelect(devices) || []}
    //       this one rigth here      ^^^^^ 
    onChange={(e) => editDevicesMultiSelect(e)}

or simple input:

<Input
    type="text"
    value={code || ''}
    //          ^^^^^

P.S. we also have a handleSelectOnClose function:

<Button onClick={handleUnselect}>
    CLOSE
</Button>
const handleUnselect = () => {
    dispatch(setCurrentDesk(undefined));
};

score 2 · Answer 3 · answered Apr 16 '22 at 20:26

2

Use a regular uncontrolled html input instead of one of the controlled react-bootstrap inputs.
You can use a ref to refer to the input.

<InputGroup hasValidation className="mb-3">
   <input
          defaultValue="Belgium"
          type="text"
          ref={this.autocomplete} />
</InputGroup>

More info on uncontrolled inputs and ref usage here:
https://reactjs.org/docs/uncontrolled-components.html

answered Apr 16 '22 at 20:26

Willem D'Haeseleer

19,661
9
66
99

I tried this after you suggested it, but I'm still getting the same error. I tried with and without a ref. I also tried using a normal with a value and onChange, but that doesn't seem to word either. – Nathan Apr 18 '22 at 19:16
Can you share your updated code that uses the `input` directly ? – Willem D'Haeseleer Apr 18 '22 at 19:38

score 2 · Answer 4 · answered Apr 20 '22 at 14:05

You can try using a third party custom package like: React Places autocomplete. This package provides an option to use controlled input, as well as other props to customise styling and other methods

const [value, setValue] = useState(null);
<GooglePlacesAutocomplete
  selectProps={{
    value,
    onChange: setValue,
  }}
/>

score 0 · Answer 5 · answered Apr 22 '22 at 02:02

You need to give an initial value and an onChange method. I'd probably use a hook to make this easier to manage. You could then use the useEffect() hook to call the API when the value of inputText changes.

const [inputText, setInputText] = useState('');

useEffect(() => {
    if (inputText.length > 0) {
        ... call the api
    }
},[inputText])

<InputGroup hasValidation className="mb-3">
    <FormControl id="autocomplete" value={inputText} onChange={(event) => {setInputText(event.target.value}}/>
</InputGroup>

score 0 · Answer 6 · answered Aug 02 '22 at 14:01

0

as Blessing Ladejobi said its beacuse of

<input value={myValue} onChange={inputHandler} /> and myValue=null

solution is define a default value for myValue (like myValue="")

answered Aug 02 '22 at 14:01

Marzieh Mousavi

1,213
1
12
28

React: Warning, a component is changing an uncontrolled input to be controlled

6 Answers6