Javascript – What value do you use for initializing state variable of type number in React?

Let me answer both your questions one by one:

1. Why input field throws a warning when it receives value as null?

This warning is shown because React expects the value prop of a controlled input component to be a string, number (or undefined if input type is uncontrolled). When the value is set to null, React considers it as an incorrect value type, so it throws a warning to remind you to use an appropriate value type.¹

Key point to note from the docs:²

The value you pass to controlled components should not be undefined or null. If you need the initial value to be empty (such as with the firstName field below), initialize your state variable to an empty string (”).

2. With what should I initialize number type state variables?

If you don’t want to show an initial value of 0, you can initialize the state variable with an empty string ('') as also mentioned above. This way, the input field will appear empty initially, and React won’t throw a warning which you’re getting.

const [amount, setAmount] = useState('');

  const handleChange = (e) => {
    setAmount(e.target.value);
    // do whatever you want with amount by parsing it to number or float 
  };
...
<input type="number" value={amount} onChange={handleChange} />

Demo here

References and further reading:

1. Controlled and Uncontrolled components in React

2. Controlling an input with a state variable

3. Converting a string to number in Javascript