Number input is string not integer in React

react input type=number
react-number-format input
react-bootstrap number input
react only allow numbers in input
react native number-format
react input type=number decimal
parseint
react input pattern

I have a react component. Im passing the updateInventory function down from my top level component.

class Inventory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name,
      price: this.props.price,
      id: this.props.id
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render(props) {
    return (
      <form onSubmit={(e)=>this.props.updateInventory(e, this.state)}>
        <input name='name' value={this.state.name} onChange={this.handleChange} />
        <input name='price' type='number' value={this.state.price} onChange={this.handleChange} />
        <button type='submit'>Update</button>
      </form>
    )
  }
};

export default Inventory;

In my top level component:

updateInventory = (e, state) => {
  let pizzaState = this.state.pizzas;
  const index = pizzaState.findIndex((pizza)=>{
    return pizza.id === state.id;
  });
  Object.assign(pizzaState[index], state);
  console.log( pizzaState );
  e.preventDefault();
};

This appears to be working so far (I havn't updated my top level state yet) but I can see that when I update the price the new value is a string not an integer. I was hoping to just have the one handleChange function for all my inputs as ill be adding some more, is this possible?

You can check the type and name of the target and handle the value accordingly.

For Example

this.setState({
  [e.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value
});

// or

this.setState({
  [e.target.name]: e.target.name === 'price' ? parseFloat(e.target.value) : e.target.value
});

Input type number is storing as string � Issue #2940 � redux-form , Redux@6.7.0 From the documentation, it says that inputs of type "number" will be A string not being a number fails fast in developers eyes. But my bank account number has the same amount of digits as the max integer. string The value to parse. If this argument is not a string, then it is converted to one using the ToString abstract operation. Leading whitespace in this argument is ignored. radix Optional An integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the string. Be careful—this does not default to 10!

You can use valueAsNumber property of the Input element

For example:

handleChange(e) {
    this.setState({
        [e.target.name]: e.target.valueAsNumber || e.target.value
    });
}

The e.target.valueAsNumber will give you the value as number or NaN if the input is empty.

The || e.target.value is a fallback in case the valueAsNumber is NaN.

input[type='number'] event.target.value changes to empty string , value stays as an Integer or as seen by the user 1. should be 1. and not "". Should fire onChange. Which versions of React, and which browser /� Learn how to convert a string to a number using JavaScript. This takes care of the decimals as well. Number is a wrapper object that can perform many operations. If we use the constructor (new Number("1234")) it returns us a Number object instead of a number value, so pay attention.

The parseFloat in onChange wont work since 4. will be parsed as 4 and the user wont be able to type any new digits. Check react-input-number for numeric input in react.

Format numbers in input fields using React — Varvet, Number input fields provide built-in validation, and arrow controls for propTypes = { name: PropTypes.string, value: PropTypes.string,� Python input() function always convert the user input into a string. but how to check user input is a number. We can Convert string input to int or float type to check string input is an integer type. also using isdigit() method of string class we can check input string is number or string.

parseFloat(), Consider Number(value) for stricter parsing, which converts to NaN parseFloat will parse non-string objects if they have a toString or valueOf method. both return 900719925474099300 , losing precision as the integer is� var numberAsInt = parseInt(number, 10); // Second arg is radix, 10 is decimal. If the number is not possible to convert to a int, it will return NaN, so I would recommend a check for that too in code used in production or at least if you are not 100% sure of the input.

Number, There is no separate integer type in common everyday use. When used as a function, Number(value) converts a string or other value to the� Wrapping the whole thing in regular quotes will literally give you the string #demo + {this.state.id} - you need to indicate which are variables and which are string literals. Since anything inside {} is an inline JSX expression , you can do:

JavaScript : Checking for all numbers, Javascript function to check if a field in a html form contains all numbers or not. To get a string contains only numbers (0-9) we use a regular expression charset="utf-8"> <title>JavaScript form validation - An integer with an optional JavaScript Framework � React - JavaScript Library � Vue - JavaScript� Given with an input by the user and the task is to check whether the given input is an integer or a string. Integer can be any combination of digits between 0 -9 and string can be any combination excluding 0 – 9. Example Input-: 123 Output-: 123 is an integer Input-: Tutorials Point Output-: Tutorials Point is a string. Approach used below is