With the release of React Hooks by Facebook, management of state has become really easy in React. Hooks helps us in storing the new data which can be used later in the application in the same session.
A counter is a simple application which counts the number of times a button has been clicked. It can also be modified such that on click of one button the count increases and on the click of other the count decreases. This is a tutorial for such a counter. I apologize for the styling in advance, I have horrible taste in styling.
The first thing that we will do is create a simple React app. Type the following lines of code in the command window in the file location where you want to create the application.
"npx create-react-app appName"
This will create a basic React app that displays the React symbol. Create a new "Counter.js" file in the "src" folder.
The “OnIncrementClick” and “OnDecrementClick” acts as event handler which increases or decreases the count value. {count} displays the current count value.
Count is a state variable which is set to a value using setCount. useState hook is used to make both these variables state variables. Whenever the Increment button is pressed the count value is increased by one and on the press of the Decrement button the count value is decreased by one.
You can test it here. Click Here
Oldest comments (0)