HOC in react

HOC stand for higher order component.

HOC’s are the components that take components as an input and return mostly components as output.Let’s look at a simple working snippet below.

App.js

import './App.css';
import Container from './Container';
import Hello from './Hello';
function App() {
// HOC
const SampleComponent = Container(Hello);
return (
<div className="App">
<SampleComponent />
</div>
);
}
export default App;

Container.js

const Container = (Component) => {
return () => (
<div>
<h1>Inside HOC</h1>
<Component />
</div>
)
}
export default Container;

Hello.js

import React from 'react'
export default function Hello() {
return (
<div>Welcome to Uncommon geeks</div>
)
}

//Output

Inside HOC
Welcome to Uncommon geeks