“Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component” is a common error that shows up in many ways. What is the cause of it and how to fix it? In this article, we will give you some solutions to fix it. Read on it.

When Do You Get The Error?

When you run the following program, you easily encounter the warning message “Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component”:

import {useState} from 'react'; 
const App = () => { 
  // didn not give a beginning value for message 
  const [message, setMessage] = useState(); 

  const handleChange = event => { 
    setMessage(event.target.value); 
  }; 

  return ( 
    <div> 
      <input 
        type="text" 
        id="message" 
        name="message" 
        onChange={handleChange} 
        value={message} 
      /> 
    </div> 
  );
}; 

export default App;

The message state variable is firstly set to undefined in the program because an initial value is not passed to the useState hook.

How To Solve The Error “Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component”?

Solution 1: Give a fallback

The simplest solution for you to fix the error “Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component” is to give a fallback in the case the input value is set to undefined. Look at the following program:

import {useState} from 'react'; 
const App = () => { 
  const [message, setMessage] = useState(); 
  const handleChange = event => { 
    setMessage(event.target.value); 
  }; 

  // value={message || ''} 
  return ( 
    <div> 
      <input 
        type="text" 
        id="message" 
        name="message" 
        onChange={handleChange} 
        value={message || ''}
      /> 
    </div> 
  ); 
}; 

export default App;

The logical OR (||) operator has been used in your program. If the left value is false (for example, undefined), the logical OR (||) operator returns the value to the right.

Solution 2: Pass a beginning value

Another method is to pass a beginning value for the state variable to the useState hook.

import {useState} from 'react'; 
const App = () => { 
  // pass a beginning value to the useState hook 
  const [message, setMessage] = useState(''); 

  const handleChange = event => { 
    setMessage(event.target.value); 
  }; 

  return ( 
    <div> 
      <input 
        type="text" id="message" 
        name="message" 
        onChange={handleChange} 
        value={message} 
      /> 
    </div> 
  ); 
}; 

export default App;

The warning is removed by passing a beginning value to the useState hook since the message variable is no longer changed from undefined to having a value.

The message variable’s initialization without a value, which sets it to undefined, results in the warning. Value=undefined is equivalent to not sending the value prop when a prop is passed. Users aree not allowed to change the input to go from uncontrolled to controlled when they begin to type because the value prop has now been supplied to the input field. Note that you should use the defaultValue prop rather than the value if you’re using an input field that can’t be controlled.

import {useRef} from 'react'; 
const App = () => { 
  const inputRef = useRef(null); 
  function handleClick() { 
    console.log(inputRef.current.value); 
  } 

  return ( 
    <div> 
      <input 
        ref={inputRef} 
        type="text" 
        id="message" 
        name="message" 
        defaultValue="Initial value" 
      /> 
      <button onClick={handleClick}>Log message</button> 
   </div> 
 ); 
}; 

export default App;

The example mentioned above uses input that is not controlled. Remember that the input field lacks a set onChange prop or value. With the defaultValue prop, you may give an uncontrolled input a starting value. If you don’t wish to establish an initial value, you can skip the prop since it is not required. We use a ref to gain access to the input while using uncontrolled input fields. The value of the uncontrolled input is logged each time the user presses the button in the example. An uncontrolled input (an input field without an onChange handler) shouldn’t have its value prop set because doing so would render it immutable and impossible to type in.

Conclusion

The options mentioned above are the quickest for the error “Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component“. If you still require assistance or have troubles, we have a strong population where everyone is normally eager to assist. At last, we sincerely wish for a day filled with new code alternatives, and thank you for your time spent reading.

Read more

→ How to solve the error: Can’t perform a React state update on an unmounted component