From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Counter best practices

Counter best practices

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Counter best practices

“

Welcome back, let's quickly work on the counter component. We'll declare a component and we'll use useState for the count. It will have an increment button, a decrement button which is going to decrement the count and a reset button which will reset the counter to zero. In the previous videos, we have already covered this example. But it does not have the increment, decrement and the reset count to zero. So let's quickly do that. Over here in the components, we have the counter functional component. Let's take a look. Currently, it is incrementing, but it does not have the decrement and reset. Let's quickly add that. I'm going to reshape this component a bit. We'll have a div and the count will show on in this div. After that, we'll add another button. Let's do the onClick event and pass on the handle decrement. Let's call it decrement. Similarly, let's have another button which has an on-click event to handle reset and let's name it reset. Now let's quickly define these variables…

Contents