CODEWITHSUNDEEP
javascriptreactjs
PullJosh
PullJosh

Reputation: 735

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

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.

Upvotes: 5

Views: 639

Answers (3)

keikai
keikai

Reputation: 15186

  1. You may want to remove the below props to enable non-number content input.
type="number"
  1. 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>
  );
}

enter image description here

Try it online:

Edit charming-sun-nyye3

Upvotes: 0

Omer
Omer

Reputation: 3496

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} />
  );
}

Upvotes: 0

Abdelmonaem Shahat
Abdelmonaem Shahat

Reputation: 544

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!
      }}
    />
  );
}

Upvotes: 0

Related Questions