How to fix Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both) in React

Check your console for the full warning message, which identifies the specific component. Look for input, textarea, or select elements with both props:

// This causes the warning
<input value={name} defaultValue="John" />
<textarea value={bio} defaultValue="Write bio..." />
<select value={country} defaultValue="US">...</select>

Use your browser's React DevTools to inspect the props of form components and verify which elements have both value and defaultValue specified.

Choose based on your requirements:

Use controlled (value prop) when you need:
- Real-time validation as users type
- To conditionally enable/disable submit buttons
- To transform input (uppercase, formatting, etc.)
- To sync the value with other parts of your UI
- Complete control over the input's state

Use uncontrolled (defaultValue prop) when you need:
- Simple forms where you only need the value on submit
- To integrate with non-React code or libraries
- To minimize re-renders for performance reasons
- Traditional form behavior where the DOM manages state

For most React applications, controlled components are recommended as they provide better integration with React's state management.

If you choose the controlled approach, remove defaultValue and manage the value with state:

// Before: Mixed props
<input value={name} defaultValue="John" onChange={handleChange} />

// After: Fully controlled
import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('John'); // Initialize in state

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

Critical: Always provide an onChange handler with value, or explicitly set readOnly if you don't want user input. Ensure the state value is never undefined or null—use an empty string '' as the default:

// Correct: Always defined
const [name, setName] = useState('');

// Wrong: Can cause controlled/uncontrolled switching
const [name, setName] = useState(); // undefined

If you choose the uncontrolled approach, remove value and use defaultValue with refs:

// Before: Mixed props
<input value={name} defaultValue="John" onChange={handleChange} />

// After: Fully uncontrolled
import { useRef } from 'react';

function MyForm() {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value); // Access value when needed
  };

  return (
    <form onSubmit={handleSubmit}>
      <input defaultValue="John" ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

With uncontrolled components, you typically access the value only when needed (like on form submission) rather than tracking it continuously.

If you need to set an initial value conditionally, handle it in the state initialization, not with both props:

// Wrong: Using both props
<input
  value={name}
  defaultValue={user?.name || 'Guest'}
  onChange={handleChange}
/>

// Correct: Initialize state with the conditional value
const [name, setName] = useState(user?.name || 'Guest');

return (
  <input
    value={name}
    onChange={(e) => setName(e.target.value)}
  />
);

For controlled components, all conditional logic for initial values should be in your state initialization, not split between state and defaultValue.

If you're using a custom input wrapper or third-party component, check its props configuration:

// Your wrapper might be adding both props
function FormInput({ initialValue, currentValue, ...props }) {
  return (
    <input
      defaultValue={initialValue}  // Remove this
      value={currentValue}          // Keep this for controlled
      {...props}
    />
  );
}

// Fix: Choose one pattern
function FormInput({ value, onChange, ...props }) {
  return (
    <input
      value={value}
      onChange={onChange}
      {...props}
    />
  );
}

Review the documentation for any form libraries you're using (React Hook Form, Formik, etc.) to ensure you're using their controlled/uncontrolled API correctly.

After making changes, test the following scenarios:

1. Initial value displays correctly when component mounts
2. Typing in the input updates as expected
3. Form submission captures the current value
4. Console no longer shows the warning
5. State updates propagate correctly to other dependent components

// Test that your controlled component works
function TestForm() {
  const [value, setValue] = useState('initial');

  console.log('Current value:', value); // Should update on every keystroke

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>You typed: {value}</p>
    </div>
  );
}

Check the browser console to confirm the warning is gone, and manually test all form interactions.