Uncontrolled input becoming controlled in React component

This warning typically occurs in React when you have an input element whose value is initially undefined (or null), and then you try to control it by setting its value with state. React warns about this because it can lead to unexpected behavior.

How to solve Warning: A component is changing an uncontrolled input to be controlled in React

The warning "A component is changing a controlled input to be uncontrolled" in React typically happens when the input's value is not properly managed through state, leading to inconsistencies in its behavior.

Here's a common scenario where you might encounter this warning:

1 const Input = ({ isChecked, setIsChecked }) => {
2   return (
3     <tr
4       className={`${
5         i % 2 === 0
6           ? 'bg-white border-b dark:bg-gray-450 dark:border-gray-500'
7           : 'border-b bg-gray-100 dark:bg-gray-500 dark:border-gray-500'
8       }`}
9     >
10       <td className='px-6 py-2 whitespace-nowrap dark:text-white'>
11         <div className='flex items-center'>
12           <input
13             type='checkbox'
14             checked={isChecked}
15             className='w-4 h-4 text-blue-600 bg-gray-100
16              border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 
17              dark:bg-gray-700 dark:border-gray-600'
18             onChange={setIsChecked}
19           />
20         </div>
21       </td>
22     </tr>
23   );
24 };
25 export default Input;

In this example, isChecked is initially undefined because useState() is called without an initial value. When the component renders, React sees that the input has no initial value, and it considers it an uncontrolled component. Later, when you update the state with setInputValue(), you are attempting to control the input.

To resolve this warning, you can provide a fallback value. For example:

1 <input
2   type='checkbox'
3   checked={isChecked || false}
4   className='w-4 h-4 text-blue-600 bg-gray-100
5         order-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 
6         dark:bg-gray-700 dark:border-gray-600'
7   onChange={setIsChecked}
8 />

A component is changing an uncontrolled input to be controlled

Understanding Controlled vs. Uncontrolled Inputs

• Controlled Input: A controlled input is one where the value is set by React state. This means you control the input value through the component’s state, ensuring that the input reflects the current state.

• Uncontrolled Input: An uncontrolled input manages its own state internally. The value is accessed via the DOM rather than through React state.

Common Causes of the Warning

• Undefined or Null Value: When you set the input value to undefined or null, it effectively switches from controlled to uncontrolled.

1 const [inputValue, setInputValue] = useState('');
2 
3 return (
4   <input
5     type="text"
6     value={inputValue || ''} // This can lead to the warning
7     onChange={(e) => setInputValue(e.target.value)}
8   />
9 );

• Changing State Management: If you start managing the input’s value with state but later switch to directly manipulating the input or vice versa.

1 const [inputValue, setInputValue] = useState('');
2 
3 // Later in the code, if you set inputValue to undefined or null
4 setInputValue(undefined); // Causes the warning

How to Fix the Warning

To resolve this warning, ensure that your input remains either controlled or uncontrolled throughout its lifecycle:

• Default to Empty String: When initializing your state, always default to an empty string instead of undefined or null.

1 const [inputValue, setInputValue] = useState(''); // Always a string
2 
3 return (
4   <input
5     type="text"
6     value={inputValue}
7     onChange={(e) => setInputValue(e.target.value)}
8   />
9 );

• Conditional Rendering: If you need to conditionally render an input, ensure it’s always controlled.

1 return (
2   <input
3     type="text"
4     value={inputValue !== null ? inputValue : ''} // Safe check
5     onChange={(e) => setInputValue(e.target.value)}
6   />
7 );

• Avoid Setting to Null/Undefined: Make sure not to set the state that controls the input to null or undefined.

By maintaining consistent management of your input value, you can prevent this warning and ensure that your forms behave as expected in React.