Transform input into a value (when it's a number) in React

Let's suppose that you want to transform an input to a number (if it's a number). Otherwise, keep the input as a string. You want to transform the field while the user is typing on the input.

You can use the following Regex pattern to match the cases such as {number}.{number}:


This is the React component:

import React, { useState } from 'react';

const Input = () => {

    const [field, setField] = useState('');

    const handleInput = (e) => {

        let input =;

            input = parseFloat(input);



            onChange    = {handleInput} 
            placeholder = {'Whatever...'} 
            value       = {field}


export default Input;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.