Creating a Simple Calculator with React.js

Now, let's update the state of the Calculator component when a button is clicked.

import React from "react";
import Display from "./Display";
import Keypad from "./Keypad";

class Calculator extends React.Component {
  state = {
    displayValue: "",
  };

  handleClick = (value) => {
    this.setState((prevState) => ({
      displayValue: prevState.displayValue + value,
    }));
  };

  render() {
    return (
      <div className="calculator">
        <Display value={this.state.displayValue} />
        <Keypad onClick={this.handleClick} />
      </div>
    );
  }
}

export default Calculator;

Next, let's update the Display component to show the value received from the Calculator component as a prop.

import React from "react";

class Display extends React.Component {
  render() {
    return <input type="text" className="display" value={this.props.value} />;
  }
}

export default Display;

Finally, let's update the Keypad component to call the onClick prop with the button's value when it is clicked.

import React from "react";

class Keypad extends React.Component {
  handleClick = (value) => {
    this.props.onClick(value);
  };

  render() {
    return (
      <div className="keypad">
        {/* keypad buttons */}
        <button onClick={() => this.handleClick(1)}>1</button>
        <button onClick={() => this.handleClick(2)}>2</button>
        <button onClick={() => this.handleClick(3)}>3</button>
        {/* and so on */}
      </div>
    );
  }
}

export default Keypad;

Step 4. Styling the calculator

To make our calculator visually appealing, let's add some basic styles. Open the src folder and create a new file called styles.css. Inside this file, add the following styles.

.calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.display {
  margin-bottom: 1rem;
  width: 200px;
  height: 30px;
  padding: 5px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
}

button {
  width: 60px;
  height: 60px;
  font-size: 18px;
}

Finally, open the App.js file inside the src folder and update it with the following code.

import React from "react";
import Calculator from "./components/Calculator";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <Calculator />
    </div>
  );
}

export default App;

Step 5. Run the Calculator App

To see the calculator in action, go back to your terminal and run the following command.

npm start

This will start the development server on localhost. Open your browser and navigate to http://localhost:3000 see your calculator app running.

Conclusion

In this article, we learned how to create a simple calculator using React.js. We created three components: Calculator, Display, and Keypad, and implemented the logic to update the display based on keypad button clicks. We also added basic styling to make the calculator visually appealing. React.js provides a powerful and flexible way to build user interfaces, making it a great choice for calculator apps and other interactive applications.