React Js Convert String to Number

React converts a string to a number. React uses props to pass data from parent to child components, and sometimes these props need to be numerical values. There are several ways to convert a string to a number in React, such as using the built-in Number, parseInt, or parseFloat methods, or employing the unary plus operator. In this article, we will explore these methods and see some examples of how to use them in React. We will also cover how to convert a string to an array of numbers, which can be handy for manipulating data.

written

reviewed

updated

How can you convert a string to a number in React.js using the `parseInt()` function?

React Js Convert String to Number:In React.js, you can convert a string to a number using different methods. The parseInt() function is used to convert a string to an integer by removing any decimal places

React Js Convert String to Number using parseInt() function

<script type="text/babel">
        function App() {
            const stringNumber = "42";
            const number = parseInt(stringNumber);

            return (
                <div className='container'>
                    <h3>React Js Convert String to Number</h3>
                    <p className='string-number'>String number: {stringNumber}</p>
                    <p className='converted-number'>Converted number: {number}</p>
                </div>

            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React String to Number

How to Convert String to Int in React using the `parseFloat()` function?

parseFloat() function, on the other hand, converts a string to a floating-point number, retaining decimal places if present.

In this React.js code snippet, the parseFloat() function is used to convert a string representation of a number, "123.45", into a numeric value. The converted number is then rendered in the component's JSX, along with the original string number. The parseFloat() function parses the string and returns a floating-point number. This allows for numerical operations to be performed on the converted number.

React Js Convert String to Int Using parseFloat() function

 <script type="text/babel">
        function App() {
            const stringNumber = "123.45";
           const number = parseFloat(stringNumber);

            return (
                <div className='container'>
                    <h3>React Js Convert String to Number</h3>
                    <p className='string-number'>String number: {stringNumber}</p>
                    <p className='converted-number'>Converted number: {number}</p>
                </div>

            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

How can you Convert a String to a Integer in React using the Number() constructor?

The Number() constructor is another option that converts a string to a number, similar to parseFloat(), but also supports converting other data type.

In the given code snippet, React.js is used to convert a string to a number using the Number() constructor. The useState hook is used to manage state variables: stringNumber represents the initial string value "42", and number represents the converted number value using Number(stringNumber). The converted number is displayed on the webpage using JSX syntax

React Js Convert String To Integer Using the Number() constructor

    <script type="text/babel">
        const { useState } = React
        function App() {
            const [stringNumber, setStringNumber] = useState("42");
            const [number, setNumber] = useState(Number(stringNumber));

            return (
                <div className='container'>
                    <h2>React Js Convert String to number</h2>
                    <p>String Number: {stringNumber}</p>
                    <p>Converted Number: {number}</p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Releated Tutorials

👉 Vue Js Convert String to Int, Number, Interger

React JS Tutorial