How to Build a Calculator with React JS

React is a popular JavaScript library for building user interfaces, and it’s a great choice for building a calculator. In this tutorial, we’ll walk through the steps of building a simple calculator with React.

Set up the project

First, make sure you have Node.js and npm installed on your machine. Then, create a new project directory and navigate to it in your terminal. Run the following command to create a new React project with create-react-app:

npx create-react-app calculator

This will create a new folder called “calculator” with all the necessary files for a React app. Navigate to the project directory and start the development server by running the following command:

cd calculator
npm start

This will open a new browser window with the default React app.

Create the Calculator component

Next, we’ll create a new component for the calculator. In your text editor, open the file src/Calculator.js and replace the default code with the following:

import React, { useState } from 'react';
function Calculator() {
  const [displayValue, setDisplayValue] = useState('0');
  const [operator, setOperator] = useState(null);
  const [waitingForOperand, setWaitingForOperand] = useState(false);
  const clearDisplay = () => {
    setDisplayValue('0');
    setOperator(null);
    setWaitingForOperand(false);
  };
  const inputDigit = digit => {
    if (waitingForOperand) {
      setDisplayValue(digit);
      setWaitingForOperand(false);
    } else {
      setDisplayValue(
        displayValue === '0' ? digit : displayValue + digit
      );
    }
  };
  const inputDot = () => {
    if (waitingForOperand) {
      setDisplayValue('.');
      setWaitingForOperand(false);
    } else if (displayValue.indexOf('.') === -1) {
      setDisplayValue(displayValue + '.');
    }
  };
  const toggleSign = () => {
    setDisplayValue(
      displayValue.charAt(0) === '-' ? displayValue.substr(1) : '-' + displayValue
    );
  };
  const inputPercent = () => {
    const value = parseFloat(displayValue);
    setDisplayValue(String(value / 100));
  };
  const performOperation = nextOperator => {
    const nextValue = parseFloat(displayValue);
    if (operator && waitingForOperand) {
      setOperator(nextOperator);
      return;
    }
    if (operator) {
      const currentValue = parseFloat(displayValue);
      const result = performCalculation[operator](currentValue, nextValue);
      setDisplayValue(String(result));
      setOperator(nextOperator);
      setWaitingForOperand(true);
    } else {
      setOperator(nextOperator);
      setWaitingForOperand(true);
    }
  };
  const performCalculation = {
    '/': (a, b) => a / b,
    '*': (a, b) => a * b,
    '+': (a, b) => a + b,
    '-': (a, b) => a - b,
    '=': (a, b) => b
  };
  return (
    <div className="calculator">
      <div className="display">{displayValue}</div>
      <button onClick={() => clearDisplay()}>AC</button>
      <button onClick={() => toggleSign()}>+/-</button>
      <button onClick={() => inputPercent()}>%</button>
      <button onClick={() => performOperation('/')}>÷</button>
      <button onClick={() => inputDigit(7)}>7</button>
      <button onClick={() => inputDigit(8)}>8</button>
      <button onClick={() => inputDigit(9)}>9</button>
      <button onClick={() => performOperation('*')}>x</button>
      <button onClick={() => inputDigit(4)}>4</button>
      <button onClick={() => inputDigit(5)}>5</button>
      <button onClick={() => inputDigit(6)}>6</button>
      <button onClick={() => performOperation('-')}>-</button>
      <button onClick={() => inputDigit(1)}>1</button>
      <button onClick={() => inputDigit(2)}>2</button>
      <button onClick={() => inputDigit(3)}>3</button>
      <button onClick={() => performOperation('+')}>+</button>
      <button onClick={() => inputDigit(0)}>0</button>
      <button onClick={() => inputDot()}>.</button>
      <button onClick={() => performOperation('=')}>=</button>
    </div>
  );
}
export default Calculator;

This code defines a function called Calculator that returns a JSX element representing the calculator interface. The calculator has a display, a number of buttons for inputting digits and operators, and functions for handling the different types of input.

Render the Calculator component

Finally, we need to render the Calculator component in the app. In the src/App.js file, import the Calculator component and render it in the return statement:

import React from 'react';
import Calculator from './Calculator';
function App() {
  return (
    <div className="App">
      <Calculator />
    </div>
  );
}
export default App;

Save the file and go back to the browser window. You should now see the calculator displayed on the page. Try entering some numbers and performing calculations to make sure it’s working as expected.

And that’s it! You’ve successfully built a calculator with React. You can customize the design and functionality of the calculator by modifying the JSX and the functions in the Calculator component.

Here is how you can build a Calculator with Javascript.

Check out other code projects. Follow us on Github.