HOC(High Order Component)
Now a days Everyone is asking about HOC(High Order Component).So day we are going to learn some basic and most important things about HOC
So What is HOC(High Order Component)
Basic Definition:-A High Order Component is a component that accept a component as an input and return a new enhanced component.
So how we will create this HOC in React Functional Component,So let me tell you
Please refer sandbox for Example:-
You can also refer below code for the HOC
import “./styles.css”;
import { useState } from “react”;
export default function App() {
return (
<div className=”App”>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<HOCRed cmp={Counter} />
<HOCBlue cmp={Counter} />
</div>
);
}
function HOCRed(props) {
return (
<div
style={{
display: “flex”,
flexDirection: “row”,
alignItems: “center”,
justifyContent: “center”,
backgroundColor: “red”,
height: “200px”
}}
>
<props.cmp />
</div>
);
}
function HOCBlue(props) {
return (
<div
style={{
display: “flex”,
flexDirection: “row”,
alignItems: “center”,
justifyContent: “center”,
backgroundColor: “blue”,
height: “200px”
}}
>
<props.cmp />
</div>
);
}
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>{count}</h2>
<button
onClick={() => {
setCount(count + 1);
}}
>
Add More
</button>
</div>
);
}