type of event.target.value should be changed to integer in react

Question

I have an input field and When we enter the value in the input field I am updating the state with the entered value using event.target.value. By default the event.target.value be a string. Can we convert that into an integer ?

    const func=(props)=>{
      return(
      <div>
     <input type="text" onChange={props.change} value={props.value}/>
     </div>
    )};

   // handler function
   changeHandler =(event)=>{
      this.setState({data:event.target.value})
   };

My state has integer value that i assigned to Zero (data:0). So while updating the state using changeHandler function data becomes string.I want to typecast the event.target.value to the integer.

Why you are not accepting any answer? Is there anything wrong or missing in my answer (stackoverflow.com/a/68177209/12247829)? — Rohit Nishad
– Rohit Nishad, Commented Jul 14, 2021 at 20:12

Nagibaba · Accepted Answer · 2022-02-22 16:01:35Z

45

Actually there is a more direct way. You can simply get the value as a number without transforming it :

event.target.valueAsNumber

Also for edge cases use it like const value = isNaN(e.target.valueAsNumber) ? null : e.target.valueAsNumber;

edited Feb 22, 2022 at 16:01

Nagibaba

5,5481 gold badge46 silver badges50 bronze badges

answered Mar 26, 2021 at 10:07

Burak Gündüz

5465 silver badges11 bronze badges

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

Comments

Treycos · Accepted Answer · 2019-08-21 07:23:49Z

12

Here is a syntactic sugar version of the other answers which will also attempt to convert your value to an int (or return NaN) in base 10 :

this.setState({data: +event.target.value });

edited Aug 21, 2019 at 7:23

answered Aug 20, 2019 at 13:02

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Comments

Rohit Nishad · Accepted Answer · 2021-08-24 07:53:39Z

Solution 1: (I highly recommend)

console.log($event.target.valueAsNumber) // Use valueAsNumber instead of value

Note: $event.target.valueAsNumber is not avilable for few input elements such as select, options etc. In that case use Solution 2. (@Mads Hjorth)

Solution 2:

use parseInt() or parseFloat() or Number()

var integer = Number('613613');
// var integer = parseFloat('613613');
// var integer = parseInt('613613', radix); // radix is option parameter

Why this error?

$event.target.value will always be a string or undefined. $event.target.value is only available for input type element. For example, if I click a div then $event.target is a div that does not have value property.

This confused me a bit. To clarify, $event.target.valueAsNumber is not viable for input elements such as select options etc. but $event.target.value is, right? Thus you have to use e.g. parseInt when getting values from input elements.

Niels · Accepted Answer · 2019-08-14 07:08:43Z

1

You can do this by parsing the string to an integer:

this.setState({data: parseInt(event.target.value, 10) });

answered Aug 14, 2019 at 7:08

Niels

50.1k4 gold badges68 silver badges86 bronze badges

Comments

Adam Kosmala · Accepted Answer · 2019-08-14 07:08:52Z

0

You can do that with parseInt function.Documentation on this

this.setState({data: parseInt(event.target.value, X)})

Where X is your radix (per documentation)

answered Aug 14, 2019 at 7:08

Adam Kosmala

9356 silver badges9 bronze badges

Comments

Nisanth Reddy · Accepted Answer · 2021-05-14 12:06:57Z

0

I was able to do it using parseFloat(). In your case, you can try

changeHandler = event => {
    this.setState({ data: parseFloat(event.target.value) });
};

But make sure to only use this handler when numbers will be added or else you get an error NaN in state.data

edited May 14, 2021 at 12:06

Nisanth Reddy

6,4801 gold badge16 silver badges31 bronze badges

answered May 14, 2021 at 0:50

David Canonigo

293 bronze badges

Comments

Micho.bojcevski · Accepted Answer · 2021-05-25 06:47:00Z

0

function changeHandler(event: any) {
        let { name, valueAsNumber, value } = event.target;
        setStateVariable((prevState: stateVariableInterface| undefined) => ({
          ...prevState,
          [name]: Number.isNaN(valueAsNumber) ? value : valueAsNumber,
        }));
      }

answered May 25, 2021 at 6:47

Micho.bojcevski

891 gold badge1 silver badge7 bronze badges

Comments

İsmail · Accepted Answer · 2022-11-28 15:53:08Z

0

event.target.valueAsNumber works.

answered Nov 28, 2022 at 15:53

İsmail

454 bronze badges

1 Comment

Eric Aya Over a year ago

This has already been mentioned in other answers.

Collectives™ on Stack Overflow

type of event.target.value should be changed to integer in react

8 Answers 8

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Related