CODEWITHSUNDEEP
reactjshigher-order-functionshigher-order-components
Samuel
Samuel

Reputation: 2635

How does the inner function in a HOC get the props

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

Upvotes: 6

Views: 1702

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281874

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.

Upvotes: 1

Related Questions