youmari
commented
1 year ago Project Approved :trophy: :tada: 🟢
Hi @AyoMoses1
Your project is complete! You have done it exceptionally well. it's time to merge it :100: Congratulations! 🎉
To Highlight :+1:
:heavy_check_mark: No linters error. :heavy_check_mark: Details PR title and description. :heavy_check_mark: Good commit messages.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear. Please, remember to tag me in your question so I can receive the notification. You can also connect with me on slack
_As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
How I used functional components in React for this project.
Functional components are just JavaScript functions, which contains some logic to perform certain actions. These components accept the data as props and return the React element which is nothing but HTML content. I decided to use functional components as it is the standard way of creating components in modern react applications.
Steps
I have created a calculator using a functional component. The component is called Calculator, and it is responsible for rendering the calculator UI.
The first thing I did is to import the useState hook from the React library. The useState hook allows me to manage the state of my application. In this case, I am using it to store the current state of the calculator.
I then define an initial state for the calculator. The state object has three properties: total, next, and operation. The total property stores the current total of the calculator, the next property stores the next number to be added or subtracted, and the operation property store the current operator.
I then define a function called onClickHandler that handles button clicks. When a button is clicked, the function extracts the value of the button and calls the calculate function with the current state and the button value. The calculate function returns an updated state object, which is then used to update the state of the calculator using the setState function.
Finally, I render the calculator UI by returning a JSX expression. The JSX expression defines the structure of the calculator UI and binds the onClickHandler function to the button click events.
Overall, using functional components in React to create a calculator is a powerful technique that allows developers to create reusable UI components. By managing the state of the application using hooks like useState, developers can create complex UIs that respond to user input in real-time.