React Calculator App using useState (Complete Example)

📌 INTRODUCTION

Building a calculator is one of the best ways to understand:

• State management
• Event handling
• Dynamic UI updates

In this program, we will create a basic calculator app that can:

• Perform addition, subtraction, multiplication, division
• Display results dynamically

👉 This is a must-do mini project for React beginners.

---

📘 PROBLEM STATEMENT

👉 Develop a program to create a basic calculator (addition, subtraction, multiplication, division) using state in React.

---

💡 CONCEPTS USED

• useState Hook
• Event Handling
• String Manipulation
• Dynamic Rendering

---

🧠 LOGIC EXPLANATION

1. Store input expression in state
2. Append values on button click
3. Evaluate expression
4. Display result

---

💻 PROGRAM CODE

Open src/App.js:

import { useState } from "react";

function App() {
  const [input, setInput] = useState("");

  const handleClick = (value) => {
    setInput(input + value);
  };

  const calculate = () => {
    try {
      setInput(eval(input).toString());
    } catch {
      setInput("Error");
    }
  };

  const clear = () => {
    setInput("");
  };

  return (
    <div style={styles.container}>
      <h1>Calculator</h1>

      <input type="text" value={input} readOnly style={styles.display} />

      <div style={styles.buttons}>
        <button onClick={() => handleClick("1")}>1</button>
        <button onClick={() => handleClick("2")}>2</button>
        <button onClick={() => handleClick("3")}>3</button>
        <button onClick={() => handleClick("+")}>+</button>

        <button onClick={() => handleClick("4")}>4</button>
        <button onClick={() => handleClick("5")}>5</button>
        <button onClick={() => handleClick("6")}>6</button>
        <button onClick={() => handleClick("-")}>-</button>

        <button onClick={() => handleClick("7")}>7</button>
        <button onClick={() => handleClick("8")}>8</button>
        <button onClick={() => handleClick("9")}>9</button>
        <button onClick={() => handleClick("*")}>*</button>

        <button onClick={() => handleClick("0")}>0</button>
        <button onClick={clear}>C</button>
        <button onClick={calculate}>=</button>
        <button onClick={() => handleClick("/")}>/</button>
      </div>
    </div>
  );
}

const styles = {
  container: {
    textAlign: "center",
    marginTop: "50px"
  },
  display: {
    width: "200px",
    height: "40px",
    fontSize: "18px",
    textAlign: "right",
    marginBottom: "10px"
  },
  buttons: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 50px)",
    gap: "5px",
    justifyContent: "center"
  }
};

export default App;

---

🖥️ OUTPUT

👉 Example:

Input: 2 + 3
Output: 5

---

🔍 STEP-BY-STEP EXPLANATION

• useState("") → stores input expression
• handleClick() → appends values
• eval() → calculates result
• setInput() → updates display
• clear() → resets input

---

⚠️ IMPORTANT NOTE

👉 eval() is used for simplicity, but:

• Not recommended in production
• Use safer libraries for real apps

---

⚡ ADVANCED FEATURES

1. Add Decimal Support

<button onClick={() => handleClick(".")}>.</button>

---

2. Add Backspace

const backspace = () => {
  setInput(input.slice(0, -1));
};

---

3. Improve UI with CSS

👉 Add colors, hover effects, grid styling

---

🎯 WHY THIS PROGRAM IS IMPORTANT

• Combines multiple React concepts
• Improves logical thinking
• Common interview project
• Helps build real apps

---

🌟 REAL-WORLD USE CASE

• Calculator apps
• Financial tools
• Dashboard widgets
• Interactive UI components

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is useState used for?

👉 To manage component state.

---

Q2. What is eval()?

👉 A function that evaluates JavaScript expressions.

---

Q3. Why avoid eval()?

👉 It can cause security issues.

---

Q4. What is event handling in React?

👉 Responding to user actions like clicks.

---

Q5. Can we build complex apps using this logic?

👉 Yes, this is the foundation.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Form Handling – Program 16
👉 React Counter App – Program 6
👉 React Toggle Visibility – Program 8

---

📌 CONCLUSION

The calculator app is a powerful way to understand how React handles state and user interaction.

👉 Practice and enhance this project to build advanced applications.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites