3

I want to check if the value of a type text input is number or string like this :

<input
  type="text"
  onChange={(e) => {
  const value = e.target.value;
    console.log(typeof value);
  }}
/>

But when I type text or number it console logs string in both cases .

How can I check if the value is number with input type text in react js ?

Samathingamajig
  • 11,839
  • 3
  • 12
  • 34

2 Answers2

9

The simplest way will be to convert the string to a number and then check if it's valid. As the value of inputs is always a string even if you use type="number", though it is good to use it if you just want numbers as the input.

You can use isNaN(+value). Here + will convert a string to a number.

<input
  type="text"
  onChange={(e) => {
    const value = e.target.value;
    console.log(!isNaN(+value)); // true if its a number, false if not
  }}
/>

Some test cases:

console.log(!isNaN(+"54"));
console.log(!isNaN(+"23xede"));
console.log(!isNaN(+"test"));

Note: As mentioned this is a simple way, there can be workarounds to bypass this, for a robust solution you can have a look here: Check whether variable is number or string in JavaScript

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
3

You can cast to number and then check if it's Nan

isNaN(parseInt('0')) // false
isNaN(parseInt('f')) // true

As noted in the comments parseInt() will return a number for a string with a number in it. Using Number on the other hand will return Nan

isNaN(Number('55')) // false
isNaN(Number('55bob')) // true
Moshe Sommers
  • 1,466
  • 7
  • 11