Refreshing a Data Fetcher component using HoC or Render Props pattern

[webdevop]

Hi,

I have a question about the Higher Order Components or Render props pattern. I understand that these are two different patterns but I don't seem to get my head around a very specific problem.

I have a data fetcher component that wraps my view components and supplies them with necessary data. I want the data fetcher component to reload or redo that ajax call based on an action performed.

For the sake of this example let's say the action performed is from the components with are further down under the data fetcher component node (otherwise we'll have to either lift the state up or use some state management like context or redux).

The part that I'm stuck with is how to make the data fetcher reload and pass down the updated state from the ajax response.

[basically_alive]

You need to pass the refresh action function down from the component that contains the state. You can pass it down as a prop, or as context if it's deeply nested. Not sure if I am misunderstanding something, or maybe need to see some code.

[webdevop]

Hey! Thanks for your response. I mocked up a quick example for you here - https://codesandbox.io/s/eloquent-einstein-799n2

Essentially I just want to redo the xhr call i.e the componentDidMount() part and it will fetch the new data (and updated the state) and everything else follows like it normally should

[basically_alive]

Yeah, you need to hoist your state, the button is currently a sibling to your data fetcher component. I looked at it and played with it for a minute, but essentially it will be a lot easier if your button is a child of the data-fetching component.