Hight order component (HOC) - React Js

 App.js:

import React, {useRef, useState} from "react";

import './App.css'

function App()

{

return(

  <div className="App">

    <h1>HOC</h1>

    <HOCRed cmp={Counter}/>

    <HOCGreen cmp={Counter}/>

    <HOCBlue cmp={Counter}/>

  </div>

)

}

function HOCRed(props)

{

  return <h2 style={{backgroundColor:'red', width:200 }}>Red<props.cmp/></h2>

}

function HOCGreen(props)

{

  return <h2 style={{backgroundColor:'green', width:200 }}>Green<props.cmp/></h2>

}

function HOCBlue(props)

{

  return <h2 style={{backgroundColor:'blue', width:200 }}>Blue<props.cmp/></h2>

}

function Counter()

{

  const [count, setCount]=useState(0)

  return <div>    

   

    <h3>{count}</h3>

    <button onClick={()=>setCount(count+1)}>Update Count</button>

  </div>

}

export default App;