React Higher Order Components

react-hoc.js

// HOC FactoryFactory method
function HOCFactoryFactory (...params) {
  console.log('params', params)
  return function HOCFactory (WrappedComponent) {
    return class withHOCFactory extends React.Component {
      render () {
        return <WrappedComponent {...this.props} />
      }
    }
  }
}

// Testing HOC
function withEnhance (ComposedComponent) {
  return class withEnhance extends React.Component {
    render () {
      console.log('ComposedC', this.props)
      return <ComposedComponent {...this.props} />
    }
  }
}

function WrappedComponent (props) {
  return <div>I am Enhanced! <button onClick={props.onSubmit}>Clicked</button></div>
}

function testExposed () {
  return {
    someProps: 'exposed!'
  }
}
  
const factoryProps = {
  testing: 'hi',
  override: testExposed(),
  onSubmit: (e) => {
    console.log('passing it down')
  }
}

const FactoryMade = HOCFactoryFactory(factoryProps)(WrappedComponent)
const EnhancedComponent = withEnhance(WrappedComponent)


// arrow functions syntax
const Loader = ({ size }) => (
  <div>Spinner</div>
)