React: Bind number input to state (handle intermediate values)

Question

I have a number stored in my React state, and I want to edit it using an <input type="number" />. Here's my attempt:

function MyNumberInput() {
  const [number, setNumber] = useState(42);

  return (
    <input
      type="number"
      value={number}
      onChange={event => {
        setNumber(parseFloat(event.target.value)); // Convert string value to a number!
      }}
    />
  );
}

Try it on JSFiddle.

The problem is that this code fails during intermediate, non-number states. If I want to enter -12, I begin by typing the negative sign. When I do, the onChange handler fires, parseFloat("-") returns NaN, and the input remains empty. As a user, it feels like my input was completely ignored.

Is parsing actually required? parseFloat is being used in some edge cases I believe. — TwistedOwl
– TwistedOwl, Commented Mar 18, 2020 at 2:40
@iamhuynq event.target.value is a string, even for an input with type="number". I want to save a number in state. — PullJosh
– PullJosh, Commented Mar 18, 2020 at 2:45

keikai · Accepted Answer · 2020-03-20 14:04:48Z

1

You may want to remove the below props to enable non-number content input.

type="number"

And remove the parseFloat to store the string like - or .0

import React, { useState } from "react";

import "./styles.css";
export default function App() {
  const [number, setNumber] = useState('');
  return (
    <div className="App">
      <input
        value={number}
        onChange={event => {
          // console.log(event.currentTarget.value);
          setNumber(event.target.value);
        }}
      />
    </div>
  );
}

Try it online:

edited Mar 20, 2020 at 14:04

answered Mar 18, 2020 at 2:50

keikai

15.3k10 gold badges56 silver badges73 bronze badges

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

2 Comments

PullJosh Over a year ago

This doesn't solve the original problem. I need the input to allow temporarily storing non-number values like - or .. This is required so that users can type -12 or .5 uninterrupted.

keikai Over a year ago

@PullJosh Answer updated, kindly check it would be appreciated

Abdelmonaem Shahat · Accepted Answer · 2020-03-18 18:50:05Z

0

just use unary plus operator to convert a string into a number like this:

function MyNumberInput() {
  const [number, setNumber] = useState(42);

  return (
    <input
      type="number"
      value={number}
      onChange={event => {
        setNumber(+(event.target.value)); // Convert string value to a number!
      }}
    />
  );
}

answered Mar 18, 2020 at 18:50

Abdelmonaem Shahat

5422 silver badges7 bronze badges

Comments

Omer · Accepted Answer · 2020-03-18 19:46:10Z

0

Use RegEx

The problem is the input get NaN is because the input type="number" and - or . is not a number.

I suggest to use RegEx:

function MyNumberInput() {
  const [number, setNumber] = useState(42);

  const updateNumber = ({ target }) => {
    const reg = new RegExp('^[0-9+-/]+$|^$');
    if (reg.test(target.value)) setNumber(target.value);
  };

  return (
    <input type="text" value={number} onChange={updateNumber} />
  );
}

edited Mar 18, 2020 at 19:46

answered Mar 18, 2020 at 19:40

Omer

3,5362 gold badges21 silver badges21 bronze badges

Collectives™ on Stack Overflow

React: Bind number input to state (handle intermediate values)

3 Answers 3

2 Comments

Comments

Use RegEx

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Use RegEx

Comments

Your Answer

Sign up or log in

Post as a guest

Related