Reactjs Higher Order Component Working Demo

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Higher Order Component Working Demo.

A higher-order component (HOC) is an advanced technique in React for reusing component logic. React-Redux is one of the best example of higher order component example. Also If we want to share the same functionality across multiple components then we need to make higher order components. In this post, I am making click counter and WithCounter.js is my HOC.

Simple I will say HOC accepts original component and return new component.

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactdemo

cd reactdemo

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm i @popperjs/core

npm start //For start project again

3. Finally for the main output, we need to add below code into our reactdemo/src/App.js file or if you have fresh setup then you can replace reactdemo/src/App.js file code with below code:

import React, { Component } from 'react'
import ClickCounter from './ClickCounter' //calling HOC
import "bootstrap/dist/css/bootstrap.min.css"
export class App extends Component {
  render() {
    return (
      <div>
        <div className="container-fluid p-5 bg-primary text-white text-center">
          <h1 className="text-center mt-3 mb-3">Reactjs Higher Order Component Working Example</h1>
          <p>Therichpost.com is the best tutorial site</p> 
      </div>
        <div className="conainer py-5 text-center">
       
        <ClickCounter />
        </div>
      </div>
    )
  }
}

export default App

4. Now guys we need to create new file ‘ClickCounter.js’ inside src folder and add below code inside that file:

import React, { Component } from 'react'
import UpdatedComponent from './WithCounter' //HOC
class ClickCounter extends Component {
    
    
    render() {
        const { count, increamentCount } = this.props
        return (
            <div>
                <button onClick={increamentCount} className="btn btn-primary">Click { count } times</button>
            </div>
        )
    }
}

export default UpdatedComponent(ClickCounter)

5. Now guys we need to create new file ‘ClickCounter.js’ inside src folder and add below code inside that file:

import React, { Component } from 'react'
import UpdatedComponent from './WithCounter' //HOC
class HoverCounter extends Component {
    render() {
        const { count, increamentCount } = this.props
        return (
            <div>
                <h2 className="mt-2" onMouseOver={increamentCount}> Hover {count} times </h2>
            </div>
        )
    }
}

export default UpdatedComponent(HoverCounter)

6. In the end Now guys we need to create new file ‘WithCounter.js’ inside src folder and add below code inside that file and this is our HOC:

import React from "react";

const UpdatedComponent = (OriginalComponent) =>
{
    class NewComponent extends React.Component
    {
        constructor(props) {
            super(props)
        
            this.state = {
                 count : 0
            }
        
        
        increamentCount = () =>
        {
            this.setState( prevState  =>{
                return { count : prevState.count + 1 }
            })
        }
        render()
        {
            return <OriginalComponent 
            count = {this.state.count} 
            increamentCount = { this.increamentCount } /> 

        }
    }
    return NewComponent
}

export default UpdatedComponent

With the help of Higher Order Component I am sharing counter functionality among the components.

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks