Let's say, I have a state variable called amount and I have an input field which changes the variable when we type in it. I don't want to show the initial value as 0. With what should I initialize the state variable then? I tried initializing with null but console threw a warning:

Warning: 'value' prop on 'input' should not be null.
Consider using the empty string to clear the ponent or 'undefined' for uncontrolled ponents.

I've two questions now:-

1. Why input field throws a warning when it receives a value as null? I tried googling but was not able to get a clear answer.
2. With what should I initialize number type state variables?

Let's say, I have a state variable called amount and I have an input field which changes the variable when we type in it. I don't want to show the initial value as 0. With what should I initialize the state variable then? I tried initializing with null but console threw a warning:

Warning: 'value' prop on 'input' should not be null.
Consider using the empty string to clear the ponent or 'undefined' for uncontrolled ponents.

I've two questions now:-

1. Why input field throws a warning when it receives a value as null? I tried googling but was not able to get a clear answer.
2. With what should I initialize number type state variables?

• javascript
• reactjs
• typescript

• Hi @ShadowLeaf, Is this a typescript project..? – Jai Kumaresh Commented Feb 1, 2024 at 12:54
• I am not sure you can use number type state for controlled input. event.target.value will return string (even for input type=number) and if you decide to parse it before setting a state, you won't be able to type decimals. Because if you type 3. (three and a dot) it will be parsed to 3 (just three) since Number(3.) or Number (3.000) will be displayed as 3. This is why I believe a state for controlled number input should be of type string. – Oki Commented Feb 1, 2024 at 13:02
• @JaiKumaresh It's JS project as of now. – ShadowLeaf Commented Feb 1, 2024 at 13:27
• @OktayYuzcan We can also use parseFloat for decimal numbers. – ShadowLeaf Commented Feb 1, 2024 at 13:28
• @ShadowLeaf You can parse string to number with a lot of ways. My point was that: what you type is not what will be in the state. If you type 3. (three and dot) and then use setState(parseFloat("3.")) you will get a state that is equal to 3, not to 3. and that will remove the dot from the input, since it is controlled input . You won't be able to type a dot. – Oki Commented Feb 1, 2024 at 13:43

2 Answers 2

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 ponent 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 official docs:²

The value you pass to controlled ponents should not be undefined or null.

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 (''). This way, the input field will appear empty initially, and React won't throw a warning that you're getting. This is also inferred from the official docs² which says:

If you need the initial value to be empty (such as with the firstName field below), initialize your state variable to an empty string ('').

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

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

Demo here

References and further reading:

1. Controlled and Uncontrolled ponents in React

2. Controlling an input with a state variable

3. Converting a string to number in Javascript

Since you are using Typescript, you can do the following:

const [value, setValue] = useState<number | undefined>(undefined)

In other words, specify the type of your state to be either number or undefined.

Of course, when using value, you need to check whether or not it is undefined. If so, handle it; if not, use value