Why does the value of the input box turn to string after I type in a number?

Question

Hi I have a small React app that can increase by 1 when user click on a button. User can also type in the value they want in the input box. However, when I type in a value and then click the button, the value is treated a string not a number i.e. 4 -> 41 -> 411 instead of 5 and 6. This works fine if I click the button without type in the value i.e. 0->1. Does anyone know why this happens ? Thanks

export default function App() {
  const [value, setValue] = React.useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <input
          value={value}
          onChange={(event) => {
            setValue(event.target.value); // -> still a number
            console.log(typeof value);
          }}
        />

        <button
          onClick={() => {
            console.log(typeof value); // -> it is a string
            setValue(value + 1);            
          }}
        >
          Click me
        </button>
      </div>
    </div>
  );
}

"*`setValue(event.target.value);` -> still a number*" - I doubt that. Notice that the `console.log` on the next line logs the type of the original `0` state, not the type of the input's `.value` [which certainly is a string](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) — Bergi, Feb 27 '22 at 21:14
Hi @Bergi, when i try to type in. The first time it print "number", the second time it print "string" — Steven, Feb 27 '22 at 21:26
That's what I'm saying. If instead you `console.log(typeof event.target.value);`, you'll see that it's always a string. — Bergi, Feb 27 '22 at 21:39
Thanks @Bergi, I think I got it. So the setValue is not immediate, and the first console.log(typeof value) = 'number' is the typeof 0, right. — Steven, Feb 27 '22 at 23:24
Yes, [`setValue` cannot change the `const value` of the current render](https://stackoverflow.com/q/54069253/1048572) — Bergi, Feb 27 '22 at 23:42

score 1 · Accepted Answer · answered Feb 27 '22 at 21:14

It's because the values inputs generate are strings. If you attempt to do "addition" with a string and a number, javascript will "assume" you want a string back and to treat both the number and the string as strings.

If you want to make sure your state stays a number type, just wrap your value like so setValue(Number(event.target.value)). Your button should be fine because it is the input that converts your state to string so if that is taken care of you don't need to do anything else.

score 1 · Answer 2 · answered Feb 27 '22 at 21:20

Value of e.target.value will always be string and it does not depend on type of input. To achieve what you want you need to cast the string you are receiving from input to an integer. By using parseInt function provided by javascript

  export default function App() {
  const [value, setValue] = 
  React.useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <input
          value={value}
          onChange={(event) => {
            setValue(event.target.value); // -> still a number
            console.log(typeof value);
          }}
        />

        <button
          onClick={() => {
            console.log(typeof value); // -> it is a string
            setValue(parseInt(value) + 1);  //-> line changed added parseInt         
          }}
        >
          Click me
        </button>
      </div>
    </div>
  );
}

Why does the value of the input box turn to string after I type in a number?

2 Answers2