Definition
If a component takes another component as an argument and returns completely new component is called a higher-order component. Higher-order components are mainly wrapper components.
Example details:
suppose 2 component named ClickCounter **and **HoverCounter shares the same kind of state in there component. We can separate states from both counter and put them in Higher-order component and wrap them with **ClickCounter **and **HoverCounter **to share their state.
ClickCounter.js
import React from 'react';
import withCounter from './withCounter';
function ClickCounter({ count, incrementCount }) {
return (
<div className="w-full flex justify-center ">
<button
onClick={incrementCount}
type="button"
className="px-6 py-2 bg-green-500 rounded-lg text-white"
>
Clicked
{' '}
{count}
{' '}
times
</button>
</div>
);
}
export default withCounter(ClickCounter);
HoverCounter.js
import React from 'react';
import withCounter from './withCounter';
function HoverCounter({ count, incrementCount }) {
return (
<div className="w-full flex justify-center mt-8">
<h1
onMouseOver={incrementCount}
className="text-green-600 tex-2xl font-bold border-2 border-solid border-gray-600 p-2"
>
Hover
{' '}
{count}
{' '}
times
</h1>
</div>
);
}
export default withCounter(HoverCounter);
Higher Order Function: withCounter.js
import React, { Component } from 'react';
const withCounter = (OrginalComponent) => {
class NewCounter extends Component {
state = { count: 0 };
incrementCount = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
const { count } = this.state;
return (
<OrginalComponent count={count} incrementCount={this.incrementCount} />
);
}
}
return NewCounter;
};
export default withCounter;
Top comments (0)