React error `value` prop on `input` should not be null

The text starts here~

Overview

When we set an initial value of input 467190389f58b85503657b7dac65d4f8--- to null or overwrite the initial value to null , it will produce" value input should not be null" warning. For example, the initial value comes from an empty API response. A fallback value can be used to solve this problem.

Here is an example to show how the error occurs.

 export default function App() {
  // ⛔️ Warning: `value` prop on `input` should not be null.
  // Consider using an empty string to clear the component or `undefined` for uncontrolled components.

  return (
    <div>
      <input value={null} />
    </div>
  );
}

The problem with the above code is that we set the value attribute to null for the input form, which is not allowed.

You might also get the value of your input form from the remote API and set it to null .

fallback value

To fix this, we can ensure that the value property is never set for the input form ---52f11747edcb2ae934449e18caff1d3a null by providing a fallback value.

 import {useState} from 'react';

const App = () => {
  // 👇️ pass empty string as initial value
  const [message, setMessage] = useState('');

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

  // ✅ use fallback, e.g.
  //  value={message || ''}

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

export default App;

Instead of null 7e948f6444e284526e11ec3ab345e8da--- we initialize the value of the state variable to an empty string.

This gets rid of the warning, unless the state variable is set to null elsewhere in your code.

We use the logical AND (||) operator, which returns the value on the right of the operator if the left-hand side is false (say null ). This helps us ensure that the input value is never set to null .

defaultValue

If you use the uncontrolled input form with the help of refs 1287cc3b69f8f43a2dd4291c666b2103---, please do not set the value attribute on the defaultValue input element, use defaultValue instead of the value attribute.

 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 above example uses uncontrolled input . Note that the input form does not set the onChange or value attribute.

You can use the defaultValue property to pass the initial value for the uncontrolled input . However, this step is not necessary, you can omit this property if you don't want to set the initial value.

When using the uncontrolled input form, we use ref to access input element. Whenever the user clicks the button in the example, the value of the uncontrolled input is logged.

You shouldn't set the value input , as this will make the input form immutable and you won't be able to type in it.