event.target.value as a number?

Question


const [data, Setdata] = useState<number[] >([]);
const [inputData, SetinputData] = useState<number>(0);
const [canAdd, SetcanAdd] = useState<boolean>(true);

  const numberField = (event: React.ChangeEvent<HTMLInputElement>) => {
    SetcanAdd(false)
    SetinputData(event.target.value);


    if(data.includes(event.target.value)){
      SetcanAdd(true)
    }

    // event.target.value Argument of type string is not assignable to parameter of type number
  };

  //jsx
    <input
        onChange={numberField }
        placeholder="add numbers"
        type="number"
        value={inputData}
     />

How can I set the event.target.value to be a number?

I know I can set everything to string, but I want it to be a number

bacco2 · Accepted Answer · 2021-04-05 18:15:54Z

21

Changed event.target.value to event.target.valueAsNumber.

Works now!

Edit: Lol, the answer was in my title

answered Apr 5, 2021 at 18:15

bacco2

3701 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cartbeforehorse Mar 15 at 10:47

For passers by, this solution doesn't work if your HTML element is a <select><option>. See: stackoverflow.com/questions/57489670/…

CertainPerformance · Accepted Answer · 2021-04-05 18:14:38Z

4

In JS, it won't be a number, even if the input is of type="number":

const val = document.querySelector('input').value;
console.log(typeof val);
console.log(val);

<input type="number" value=80>

So you shouldn't try to have event.target.value be typed as a number, because it isn't.

You'll have to convert it to a number yourself explicitly, if that's what you want.

const numValue = Number(event.target.value);
// use numValue

answered Apr 5, 2021 at 18:14

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

Linda Paiste Over a year ago

This. Plus you can use parseInt or parseFloat to convert it.

Alvin Flores Acosta · Accepted Answer · 2022-05-08 03:56:56Z

4

you can try:

event.target.valueAsNumber
+event.target.value
Number(event.target.value)
parseInt(event.target.value) || parseFloat(event.target.value)

answered May 8, 2022 at 3:56

Alvin Flores Acosta

413 bronze badges

Collectives™ on Stack Overflow

event.target.value as a number?

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related