Skip to content

Instantly share code, notes, and snippets.

@Saspian
Last active April 15, 2021 11:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Saspian/3156aefd96b85cbacd99295555fdc752 to your computer and use it in GitHub Desktop.
Save Saspian/3156aefd96b85cbacd99295555fdc752 to your computer and use it in GitHub Desktop.
Example of HOC (High order component)
import React from "react"
import withData from "./withData";
const maxSpeakersToShow = 2;
const Speakers = ({speakers}) => {
return (
<div>
{speakers.map(({ name, address })=> {
return <h1>{name, address}</h1>
})
</div>
)
};
export default withData(maxSpeakersToShow)(Speakers);
function withData(maxSpeakersToShow) {
return function(Component) {
const speakers = [
{name: "Sanjay gurung", address: "kathmandu" },
{name: "Sirish gurung", address: "Patan" },
{name: "Abhinab gurung", address: "Patan" },
]
return function() {
const limitSpeaker = speakers.slice(0, maxSpeakersToShow);
return <Component speakers={limitSpeaker}></Component>
}
}
}
export default withData;
//lamdas version of above example
const withData = (maxSpeakersToShow) = (Component) => {
const speakers = [
{name: "Sanjay gurung", address: "kathmandu" },
{name: "Sirish gurung", address: "Patan" },
{name: "Abhinab gurung", address: "Patan" },
];
return () => {
const limitSpeaker = speakers.slice(0, maxSpeakersToShow);
return <Component speakers={limitSpeaker}></Component>
}
}
export default withData;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment