How to create calculator in react js?

November 14, 2024

Hi Friends 👋,

Welcome To aHoisting!

To create calculator you have to use state stored value, javascript ka book calculation, and html ka so those calculaton.

Today, I am going to show you, how to create calculator in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useState } from 'react';

Step 3: Create a Component.

You can use onClick={() => handleOperationClick('+')} to create calculator in react js.

<div className="calculator">
    <div className="display">{displayValue}</div>
        <div className="buttons">
            <button onClick={() => handleClear()}>C</button>
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((number) => (
                <button key={number} onClick={() => handleNumberClick(number)}>
                        {number}
                    </button>
                ))}
                <button onClick={() => handleOperationClick('+')}>+</button>
                <button onClick={() => handleOperationClick('-')}>-</button>
                <button onClick={() => handleOperationClick('*')}>*</button>
                <button onClick={() => handleOperationClick('/')}>/</button>
                <button onClick={handleEquals}>=</button>
    </div>
</div>

Create calculator example.

The below code is an example of a React. You have to import react and use state stored value, javascript ka book calculation, and html ka so those calculaton.

App.js

import React, { useState } from 'react';

const Calculator = () => {
    const [displayValue, setDisplayValue] = useState("0");
    const [storedValue, setStoredValue] = useState(null);
    const [operation, setOperation] = useState(null);

    const handleNumberClick = (number) => {
        setDisplayValue(displayValue === "0" ? String(number) : displayValue + number);
    };

    const handleOperationClick = (op) => {
        if (storedValue === null) {
            setStoredValue(parseFloat(displayValue));
            setDisplayValue("0");
        }
        setOperation(op);
    };

    const handleClear = () => {
        setDisplayValue("0");
        setStoredValue(null);
        setOperation(null);
    };

    const handleEquals = () => {
        if (operation && storedValue !== null) {
            const currentValue = parseFloat(displayValue);
            let result;
            switch (operation) {
                case '+':
                    result = storedValue + currentValue;
                    break;
                case '-':
                    result = storedValue - currentValue;
                    break;
                case '*':
                    result = storedValue * currentValue;
                    break;
                case '/':
                    result = storedValue / currentValue;
                    break;
                default:
                    return;
            }
            setDisplayValue(String(result));
            setStoredValue(null);
            setOperation(null);
        }
    };

    return (
        <div className="calculator">
            <div className="display">{displayValue}</div>
            <div className="buttons">
                <button onClick={() => handleClear()}>C</button>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((number) => (
                    <button key={number} onClick={() => handleNumberClick(number)}>
                        {number}
                    </button>
                ))}
                <button onClick={() => handleOperationClick('+')}>+</button>
                <button onClick={() => handleOperationClick('-')}>-</button>
                <button onClick={() => handleOperationClick('*')}>*</button>
                <button onClick={() => handleOperationClick('/')}>/</button>
                <button onClick={handleEquals}>=</button>
            </div>
        </div>
    );
};

export default Calculator;

In the above code example, I have used the storedValue to create calculator in react js.

Check the output of the above code.

All the best 👍