How to Create a Simple Calculator Application Using the useState Hook

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 handleNumberfunction 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 handleOperatorfunction 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 handleCalculatefunction 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 handleClearfunction 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 repository. Happy coding!