Higher order component/function

class-component.js

class MyComponent extends React.Component {
  render () {
    const {Foo, Bar, children} = this.props
    
    return <Foo hello='world'>
      <Bar>{...children}</Bar>
    </Foo>
  }
}

component.js

// declare a higher order component
function MyComponent (props) {
  const {Foo, Bar} = props
  return <Foo hello='world'>
    <Bar />
  </Foo>
}

// use it
const mycomponent = <MyComponent
  Foo={MyFooComponent}
  Bar={MyBarComponent}
/>

function.js

// Although this is not React, concept higher order component comes from this: Higher Order Function

// declare a higher order function
const compose = (outer, inner) => x => outer(inner(x))

// use it
const reverse = str => Array.from(str).reverse().join('')
const uppercase = str => str.toUpperCase()
const reverseThenUppercase = compose(reverse, uppercase) // <- compose is a higher order function
console.log(reverseThenUppercase('abcdef')) // should print 'FEDCBA'