How to Create a Simple Calculator Application Using the useState Hook
Tags: react, javascript, beginners, webdev
Published: 2023-03-10 17:29:10

{% youtube L8XmvzDIRL8  %}
Calculators are essential tools for performing mathematical calculations quickly and accurately. In this article, we will guide you through the process of creating a simple calculator application using the useState hook in React. 

## Introduction
React is a popular JavaScript library used for building user interfaces. The `useState` hook is a powerful feature of React that allows us to add state to functional components. With the `useState` hook, we can create a simple calculator application that performs basic arithmetic operations like addition, subtraction, multiplication, and division.
Prerequisites
Before we begin, make sure you have `Node.js` and `npm` installed on your system.

**Setting Up the Environment**
To create our simple calculator application, we will use `create-react-app`, a tool that sets up a React project with a single command. Here are the steps to create a new React project:

**Open your terminal or command prompt.**
Create a new directory for your project by typing `mkdir calculator-app` and press Enter.
Change into the new directory by typing `cd calculator-app` and press Enter.
Type the following command and press Enter to create a new React project:

```
npx create-react-app .
```
Once the project is created, you can open it in your favorite code editor.

**Creating the Calculator Component**
Now that we have set up our environment, we can start building the calculator component. In this section, we will create a new file called `Calculator.js` inside the src/components directory.

we have used `CSS` to style the calculator to resemble a traditional calculator. We have created three state variables using the `useState` hook. value represents the current value of the calculator display, `prevValue` represents the previous value entered by the user, and `operator` represents the mathematical operation selected by the user.

we have created three functions to handle user interactions with the calculator.

The `handleNumber `function is called when a user clicks on a number button. It concatenates the clicked number to the current value state using the concat method.

The `handleOperator `function is called when a user clicks on an operator button. It sets the prevValue state to the current value, sets the value state to an empty string, and sets the operator state to the clicked operator.

The `handleCalculate `function is called when a user clicks on the equal button. It performs the mathematical operation specified by the operator state and sets the value state to the result. It also resets the prevValue and operator states.

The `handleClear `function is called when a user clicks on the clear button. It resets all state variables to their initial values.

In the return statement, we have created the calculator's layout using a combination of div and button elements. We have also assigned the appropriate event handlers to each button using the onClick prop.

We have also used the value prop to display the value state in the calculator display div.

Overall, this example demonstrates how to use the `useState` hook to manage state in a more complex React application and perform basic arithmetic calculations based on user input.

If you want to see the full code and try out the application for yourself, you can check out the [Github](https://github.com/SidraMaq/ReactJs/tree/main/calculator) repository. Happy coding!