Convert e.target.value to integer in reactjs using useState

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 ?

    //useState()
    const [count,setCount]=useState();

    //handler function
   const handleCapacity=(e)=>{
     setCount(e.target.value);
   }

   
   //form code

   <select  value={count} onChange={handleCapacity}>
          <option value="one">1</option>
          <option value="two">2</option>
          <option value="three">3</option>
   </select>

output

If I print count value iam getting String values for example 1==>"one" 2==>"two" 3==>"three" How to get integer values?

These values ("one", "two", "three") ***are*** strings, but not number-like strings ("1", "2", "3"), they can't be converted to a number without going through a utility function to map the string to a number value. Change the option values to "1", "2", "3" and use `parseInt` or `Number`. — Drew Reese, Dec 05 '20 at 08:10
Or you could make them numerical strings and just use parseInt — jonrsharpe, Dec 05 '20 at 08:10

b3hr4d · Answer 1 · 2020-12-05T08:34:15.507

i test ur code here and realize u can set number as value and it should be fine, if u get string number like this "1" u can change this to number using this Number("1") , but u cant get 1 from "one" without using another function.

const Options = ()=>{
 const [count,setCount]= React.useState();

  //handler function
 const handleCapacity=(e)=>{
   console.log(e.target.value)
   setCount(e.target.value);
 }
 return (
    <select value={count} onChange={handleCapacity}>
          <option value="1" >one</option>
          <option value="2" >two</option>
          <option value="3">three</option>
    </select>
 )
}

ReactDOM.render(
  <Options />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

score 0 · Accepted Answer · answered Dec 05 '20 at 08:22

0

In JavaScript if you want to convert a string to an integer you can have a look here. Now in your case if you have this option tag <option>1</option>, you will get "1" from e.target.value. Number(e.target.value) will give you a JavaScript number.

answered Dec 05 '20 at 08:22

mathieux51

344
4
10

1

Did you read OP's code, the option value is `value="one"`, not `value="1"`, so imply doing `Number(e.target.value)` will result in `NaN`. – Drew Reese Dec 05 '20 at 08:30

score 0 · Answer 3 · answered Dec 05 '20 at 09:06

/*
create an object to map text value 
of selected to integer value. 
*/

const number = {
   "one": 1,
   "two": 2,
   "three":3,
}

//.....

const [count,setCount]=useState();

    //handler function
   const handleCapacity=(e)=>{
     setCount(number[e.target.value]);
   }

   
   //form code

   <select  value={count} onChange={handleCapacity}>
          <option value="one">1</option>
          <option value="two">2</option>
          <option value="three">3</option>
   </select>

Convert e.target.value to integer in reactjs using useState

output

3 Answers3