How to fix You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. in React

The standard solution is to add an onChange handler that updates the state backing the input value. This creates a proper controlled component:

import { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');
  
  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

The onChange handler receives a synthetic event, and e.target.value contains the new input value. Update your state synchronously in the handler so React re-renders with the new value.

If you don't need to control the input value through React state, use defaultValue instead of value. This creates an uncontrolled component that manages its own state:

function MyForm() {
  return (
    <input
      type="text"
      defaultValue="Initial text"
      name="username"
    />
  );
}

With defaultValue, React sets the initial value but doesn't control subsequent changes. Access the value later via a ref or form submission event. This approach works well for simple forms where you don't need real-time validation or derived state.

If the field genuinely should not be editable, add the readOnly prop to explicitly declare this intent and suppress the warning:

function UserProfile({ username }) {
  return (
    <input
      type="text"
      value={username}
      readOnly
      className="bg-gray-100"
    />
  );
}

The readOnly attribute makes the semantic purpose clear and tells React you intentionally want a non-editable field. Consider using styled text or a <p> tag instead if no input interaction is needed.

Ensure your state is never undefined or null if you're using controlled components. Always initialize with an appropriate default:

// Good - always defined
const [text, setText] = useState('');
const [count, setCount] = useState(0);
const [selected, setSelected] = useState('option1');

// Bad - undefined causes issues
const [text, setText] = useState();
const [data, setData] = useState(null); // If used immediately

For values that load asynchronously, use empty string, empty array, or provide a loading state until data arrives. Use the value ?? '' pattern if the value might be undefined or null.

Verify you're not conditionally setting onChange in a way that causes it to be undefined:

// Problem - onChange only set sometimes
<input
  value={text}
  {...(someCondition && { onChange: handleChange })}
/>

// Fix - always provide onChange or use readOnly
<input
  value={text}
  onChange={someCondition ? handleChange : () => {}}
  readOnly={!someCondition}
/>

Inspect any prop spreading or conditional logic that might cause onChange to be missing. Ensure the handler is always present for controlled inputs.

If using form libraries like React Hook Form, Formik, or React Bootstrap Typeahead, ensure you're passing the onChange handler correctly:

// React Hook Form example
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register } = useForm();
  
  return (
    <input
      type="text"
      {...register('fieldName')} // Spreads value, onChange, etc.
    />
  );
}

Consult the library's documentation for the correct pattern. Some libraries provide custom onChange prop names or handle state management differently. Check GitHub issues for known compatibility problems.