Objective

Create a very basic counter program with reset and increment functionality.

Difficulty

Very easy

Description

A counter is simply a program where we have a number, known as the count, that could be incremented with the help of some increment button, and then reset back to 0, again with the help of a reset button.

It's literally as if we are 'counting' numbers using the counter, hence the word 'counter'.

Counter programs are really common and really easy to develop, be that in any JavaScript UI library/framework. Equally, they're also a very nice way to brush up one's understanding of the library/framework without having to overcomplicate ideas and improvise a lot in the code.

In this exercise, you have to create an elementary counter with two functionalities:

  1. Increment it by 1.
  2. Reset it all the way back to 0.

The structure of the counter should be as follows: an <h1> must showcase the current count, a <button> should represent the reset button while another one should represent the increment button.

And that's it.

Here's a demonstration of what your final result should look like:

View Solution

New file

Inside the directory you created for this course on React, create a new folder called Exercise-1-A-Simple-Counter and put the .js solution files for this exercise within it.

Solution

The first step is to get done with the general structure of the counter. It's pretty basic — we'll start with a container <div> and nest it inside an <h1> followed by two buttons.

const element = (
   <div>
      <h1></h1>
      <button>Reset</button>
      <button>Increment (+)</button>
   </div>
);

For now, the buttons have content in them, but the <h1> doesn't. That's because the content of <h1> is dynamic (i.e. it'll keep on changing). In particular, the counter's count will get shown inside the <h1>.

This count will be a part of the counter's state. Alright, now because we have to deal with state, we'll have to create a component to denote the counter and then call useState() inside it, and obviously put all of our JSX inside there as well.

Let's call the component Counter and the state constant as count.

This gives us the following code:

function Counter() {
   const [count, setCount] = useState(0);

   return (
      <div>
         <h1>{count}</h1>
         <button>Reset</button>
         <button>Increment (+)</button>
      </div>
   );
}

So far, so good.

Remember to have a named import called useState in the statement importing the react library so that the call to useState() works!

Now, we're just left with setting up the click event handlers of the <button>s. This mandates the onClick attribute with a function as its value.

For the reset button, inside the handler function, we'll call setCount(0) because the reset needs to happen all the way down to 0. For the increment button, we'll call setCount(count + 1) in order to increment the value of count.

Here's the code defining these handlers:

function Counter() {
   const [count, setCount] = useState(0);

   return (
      <div>
         <h1>{count}</h1>
         <button onClick={() => setCount(0)}>Reset</button>
         <button onClick={() => setCount(count + 1)}>Increment (+)</button>
      </div>
   );
}

And we're done.

Live Example

The courtesy of React, we were able to implement a fully-functional counter in just 11 lines, including the markup of the program.

Contrast this with the JavaScript HTML DOM — A Simple Counter Exercise from our JavaScript course, where almost the same program (which although had a decrement functionality as well) required 23 lines of JavaScript and 4 lines of HTML.

React is undoutedly super powerful and super useful — it's no wonder why it's so popular.