how to add thousand separator for number input fields in react?

Question

I want to add thousand separators to an number input however I don't want to change the value. I add the separators but the value will become string.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [value, setValue] = useState(0);

  const addCommas = (num) =>
    num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  const removeNonNumeric = (num) => num.toString().replace(/[^0-9]/g, "");

  const handleChange = (event) =>
    setValue(addCommas(removeNonNumeric(event.target.value)));

    console.log(typeof value)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

In this code as soon as user enters a number, the typeof value will become string since we are using toString method. I was wondering if there is a way to implement an input and only modify its view not its value.

Does this answer your question? Thousand separator input with React Hooks — IntFooBar
– IntFooBar, Commented Dec 3, 2022 at 12:34
no its not. this way changes the type of value to string. I want to keep the type of value as number but shows the thousand separators at the same time. — Sky
– Sky, Commented Dec 3, 2022 at 13:47

Ashraful Mijan · Accepted Answer · 2022-12-05 15:37:19Z

2

using this code solve this problem the code is below and another little thing i can say may be none numaric string are not able to convert to number and the thing is that a comma as like none numaric string that's why you got NaN see the code solution:

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [value, setValue] = useState({
    displayValue: 0,
    actualNumberValue: 0
  });
  const handleChange = (event) => {
    const strNumber = event.target.value.replace(/[^0-9]/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    setValue({
      displayValue: strNumber,
      actualNumberValue: Number(strNumber.replace(/,/g, ""))
    });
  };
  console.log(typeof value.actualNumberValue);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="text" value={value.displayValue} onChange={handleChange} />
    </div>
  );
}

edited Dec 5, 2022 at 15:37

answered Dec 3, 2022 at 15:23

Ashraful Mijan

1047 bronze badges

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

4 Comments

Sky Over a year ago

It converts the number to NaN if it is greater than 3 digits.

Ashraful Mijan Over a year ago

please see my answer i just modified now.

Sky Over a year ago

It's not working. First of all I want to have only 1 value. Second the string value for input field will be something like this: 1,0,0,0,0,0,0,0,000

Ashraful Mijan Over a year ago

i just update my previous solution with one more replace method and after that solve like this: 1,0,0,0,0,0,0,0,000 issue but still first problem because can't possible none numaric string to convert number that's why i take two variable. Thank you dear

Collectives™ on Stack Overflow

how to add thousand separator for number input fields in react?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related