React is the well-known library of JavaScript that is widely used to create the interactive user interface. It is used for the front-end, making it easier for the developers to design projects for the websites they are working for or on. Beginners try their level best to become a pro by working on multiple projects and often they end up with an error warning or maybe stuck somewhere to continue with the project. Create a numbers only Input field in React.js is a project you may need help for.

Sometimes, there is a requirement to create the input field to only accept numbers. So, let’s highlight how to create a numbers only input field in React.js

How To Create a Numbers Only Input field in React.js

You need to focus on a few aspects if you want to create an input field that you need to only accept digits. Have focus on

• The ‘text’ that should be set as the type of input field
• Event handler ‘onChange’ removes non-numeric values when added
• Make the input value in a state variable

When you want to accept numbers. It looks like this

Input

Hello! welcome to Itturoria!28 Create 2229A Numbers 2015Only Input Field in React.Js

Output

2822292015

Now have a look at the code to achieve this in return

Using Event Handler and useState

import {useState} from 'react';

const application = () => {
  const [value, setValue] = useState('');

  const handleChange = event => {
    const result = event.target.value.replace(/\D/g, '');
    setValue(result);
  };

  console.log(value);
  console.log(typeof value);
  console.log(Number(value));

  return (
    <div>
      <div>Hello! welcome to Itturoria!28 Create 2229A Numbers 2015Only Input Field in React.Js___</div>
      <input
        type="text"
        placeholder="Your favorite number"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default application;

In this code, we use the hook useState so that we can track the value of the input field. The ‘handleChange’ function triggers whenever the value of the input is changed.

We passed two parameters to the String.replace method to remove non-digit characters. The parameters are ‘regexp’ and ‘replacement’. The character ‘\D’ is not a digit. The ‘g’ (global) flag is used to match non-digits characters and then replace them with an empty string.

Handle the User’s Input

You may have encountered the scenario when taking input from the user and they enter characters instead of numbers. In that case, the state variable should be an empty string as you may not want to convert an empty string to a digit/number as you can get only ‘0’ in return.

Check out the example

import {useState} from 'react';

const application = () => {
  const [value, setValue] = useState('');

  const handleChange = event => {
    const result = event.target.value.replace(/\D/g, '');
    setValue(result);
  };

  console.log(value);
  console.log(typeof value);
  console.log(Number(value));

  // validation
  if (value !== '') {
    const num = Number(value);


    // submit form
  }

  return (
    <div>
      <div>Hello! welcome to Itturoria!28 Create 2229A Numbers 2015Only Input Field in React.Js___</div>
      <input
        type="text"
        placeholder="Your favorite number"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default application;

To make sure the input doesn’t hold the string’s value as empty, and then, convert that value to a number.

Conclusion

In this article, we discussed how to create a numbers only input field in react.js.

Simpler ways are the highlight to help you with the code. I hope it helps!