6 of 100DaysOfCode

const EnhancedComponent = higherOrderComponent(ComponentToBeWrapped)

const Speakers = ({ speakers }) => {  return (    <div>      {speakers.map(({ imageSrc, name }) => {        return (          <img src={`/images/${imageSrc}.png`} alt={name} key={imageSrc}></img>        );      })}    </div>  );};function withData(maxSpeakersToShow) {  return function(Component) {    const speakers = [      { imageSrc: 'speaker-component-1124', name: 'Douglas Crockford' },      { imageSrc: 'speaker-component-1530', name: 'Tamara Baker' },      { imageSrc: 'speaker-component-10803', name: 'Eugene Chuvyrov' }    ];    return function() {      // This is the place where magic happens      // How can this function access Components if its parent function have already executed?      return <Component speakers={speakers}></Component>;    };  };}export default withData(Speakers);/*Speakers are nothing but just the people who are supposed to give a presentation on the given day, like a regular TED talk.*/