Introduction to Functional Component and React Hooks For Beginners, Counter Example

Quick Introduction to hooks

React Hooks are introduced to the world in 2018 by React team

Hooks let you use state and other react features without having to define a javascript class. They allow cleaner and less clunky code

Check out the React Hooks documentation: https://reactjs.org/docs/hooks-intro.html

What we are going to cover

1. create react app
2. implement increment and decrement buttons
3. prevent the counter from going below 0 and above 20
4. turn the counter red when its 10 and above and change it to its original color when below 10
5. set the initial counter value and if not set the initial value is 0
6. add resent button to reset counter to the initial value

STEP 1:

create react app with the latest version

npx create-react-app counter

your folder should be like the image below , remove other files and a new file Counter.js

In the App.js file we should import Counter.js file and render it:

import React from ‘react’;
import Counter from ‘./Counter’;
import ‘./App.css’;
function App() {
return (
<div className=”App”>
<h1> Counter</h1>
<Counter />
</div>
);
}
export default App;

in th Counter.js let’s intialise and render counter value.

import React, { useState } from ‘react’
function Counter() {
const [counter, setcounter] = useState(0);
return (
    <div className="counter__container">
        <div className="counter">
          {counter}
        </div>
     </div>
)
}
export default Counter

STEP 2: Implement increment and decrement buttons

In the Counter.js file we are going to add two buttons , one which increases the counter by one and the other with decreament by one

After implementing all this the code will look like this:

import React, { useState } from ‘react’
function Counter() {
const [counter, setcounter] = useState(0);
const handleIncrement = () => {
      setcounter(counter + 1)
}
const handleDecrement = () => {
    setcounter(counter - 1)
}
return (
    <div className="counter__container">
        <div className="counter">
           <button onClick={handleIncrement}>Increment</button>
             <span>{counter}</span>
          <button onClick={handleDecreament}>Decrement</button>
        </div>
     </div>
)
}
export default Counter

STEP 3: prevent the counter from going below 0 and above 20

This is easy we are just going to disable the increment button when count value is 20 and above and disable decrement when count value is 0 or below.

i also added if statement in both handleIncrement and handleDecrement function. In handleIncrement the counter increase only if counter in bellow 20 and in handleDecrement function , the counter will decrement when it is above 0

import React, { useState } from ‘react’
function Counter() {
const [counter, setcounter] = useState(0);
const handleIncrement = () => {
     if(counter < 20){ 
       setcounter(counter + 1)
      }   
}
const handleDecrement = () => {
   if(counter > 0){  
      setcounter(counter - 1)
    }
}
return (
    <div className="counter__container">
        <div className="counter">
           <button disabled={counter >= 20} onClick{handleIncrement} >    Increment</button>
             <span className="counter__value">{counter}</span>
          <button disabled={counter <= 0} onClick={handleDecreament}>Decrement</button>
        </div>
     </div>
)
}
export default Counter

STEP 4: Turn the counter red when its 10 and above then change it to its original color when below 10

To implement this we are going to use conditional css rendering

Original counter css className and red counter css:

.counter__value {
  font-weight: 800;
  font-size: 1.2em;
}
.red__counter {
   color: red;
}

In Our counter value we are going to add these classes as follows

<span className={counter >= 10 ? “counter__value red__counter” : “counter__value”}>{counter}</span>

STEP 5: set the initial counter value and if not set the initial value is 0

We are going to allow Counter.js to receive props which sets the intial counter.

We are going to use useEffect to set the initial counter when the function renders

Our Counter.js will be like this:

import React, { useState, useEffect } from ‘react’
function Counter({intialCounter}) {
const [counter, setcounter] = useState(0);
useEffect(() => {
   if(initialCounter){
      setcounter(intialCounter)
    }
}, [])
const handleIncrement = () => {
     if(counter < 20){ 
       setcounter(counter + 1)
      }   
}
const handleDecrement = () => {
   if(counter > 0){  
      setcounter(counter - 1)
    }
}
return (
    <div className="counter__container">
        <div className="counter">
           <button disabled={counter >= 20} onClick{handleIncrement} >    Increment</button>
             <span className="counter__value">{counter}</span>
          <button disabled={counter <= 0} onClick={handleDecreament}>Decrement</button>
        </div>
     </div>
)
}
export default Counter

To check if this is working we are going to pass inial counter in App.js when we render the Counter function

import React from ‘react’;
import Counter from ‘./Counter’;
import ‘./App.css’;
function App() {
   return (
     <div className=”App”>
       <h1> Counter</h1>
       <Counter initialCounter={9}/>
    </div>
   );
}
export default App;

STEP 6: Add resent button to reset counter to the initial value

We are going to add a button which will display only and if the initial counter has changed. For use we are going to add a state value which is going to check whether the initial counter has changed.

So when ever the counter changes , isChanged value is going to be false;

After implementing all this the Counter.js file will be like this:

import React, { useState, useEffect } from ‘react’
function Counter({intialCounter}) {
 const [counter, setcounter] = useState(0);
 const [isChanged, setIschanged] = useState(false)
useEffect(() => {
   if(initialCounter){
      setcounter(intialCounter);
    }
}, [])
const handleIncrement = () => {
     if(counter < 20){ 
       setcounter(counter + 1);
       setIschanged(true);
     }   
}
const handleDecrement = () => {
   if(counter > 0){  
      setcounter(counter - 1);
      setIschanged(true)
    }
}
const handleResetButton = () => {
   setshowReset(false)
  if(initialCounter){
   setcounter(initialCounter)
  }
 else{
   setcounter(0)
   }
}
return (
    <div className="counter__container">
        <div className="counter">
           <button disabled={counter >= 20} onClick{handleIncrement} >    Increment</button>
             <span className="counter__value">{counter}</span>
          <button disabled={counter <= 0} onClick= {handleDecreament} > Decrement </button>
        </div>
             { isChanged ?  <button onClick={handleResetButton} className="reset__button">Reset</button> : <></>}
     </div>
)
}
export default Counter

We have come to the end of this tutorial . Below is the github repository of the full code: https://github.com/maru25-alt/hooksCounter.git

Till next time, HAPPY CODING!!!