reactjs - How does the inner function in a HOC get the props

Question

I'm just getting my head around using HOC in React, one thing that is confusing me slightly is, how does my inner function in this example gain access to props as an argument?

const withProps = Component => (
  props => {
    return <Component {...props}/>
  }
)

export default withProps

Answer 1

To add more to what @AliAnarkali said, a HOC returns you a component so when you write like

const EnhancedApp = withProps(App);

EnhancedApp is basically

  const EnhancedApp = props => {
    return <Component {...props}/>
  }

which a functional component and when you render EnhancedApp like

<EnhancedApp onChange={this.onChange} value={this.state.value} />

It is similar to how a functional component receives onChange and value as props and hence in an HOC, the inner function gets the props like this.