Monday, 25 November 2019

How can I pass attributes from a stateful component to an event handler used in an HOC wrapping a child component?

I am using a framework where I must pass an event handler into an HOC that is wrapping one of the children of my stateful Page component.

<Page>
    <HOC onClick={fn}>
        <PageColumn>
        </PageColumn>
    </HOC>
</Page>

I have a function in my stateful Page component that relies on the state and props of page. I must use a HOC that wraps a child component of the page. Within this HOC I must call an onClick method that relies on the state of the Page component.

So far I have tried passing down a reference to this.state in order to use the Page state in the HOC, and I have tried passing down props that are assigned the values that I needed in the parent state. In the onClick fn, whether I reference the necessary properties by using this.state or this.props, I get the error:

 cannot read property '<attribute>' of undefined

How can I successfully implement this pattern?



from How can I pass attributes from a stateful component to an event handler used in an HOC wrapping a child component?

No comments:

Post a Comment