How can I reuse a function with this.setState and other component function in react native?

Question

I don't want to have a handle refresh function in every single screen in my project, so I created a Helper.js to handle this. This function has this.setState and another call for a function inside the screen component. This is what I got so far but it returns an error.

Exported function

export function handleRefresh(component) {
    const {page, refreshing} = component.state
    component.setState(
      {
        page:1,
        refreshing:true
      },
      () => {
        component.makeRemoteRequest();
      }
    );
  };

and I call it in the component like this:

<FlatList
     ...
     onRefresh={()=> handleRefresh(this)}
     refreshing={this.state.refreshing}
     ...
     />

I saw that you can pass "this" as a param, but the error still says it is undefined.

That was my mistake! I imported without { }, now it works fine! Thanks. — Mark Kiraly, Oct 17 '19 at 15:31

Prashen · Answer 1 · 2019-10-17T12:25:05.003

setState shall be within that screen always where you are using FlatList because after making API you have to update and control the state of that screen.
All the states will be in the component where FlatList using.
Use case are not logical in my view. You can try to create a helper function which accepts different functions params like: page, isRefreshing and return the API response and also the API url and datapost will also be dynamic. Because you want to use it in many areas. It will be difficult to maintain.
So, If you like then use redux what you want.

https://snack.expo.io/@prashen/flatlist-onrefresh

score 0 · Answer 2 · answered Oct 17 '19 at 12:39

You can do in this way.

class AComponent {
    ...
    render() {
        const thisComponent = this;
        <FlatList
         ...
         onRefresh={()=> handleRefresh(thisComponent)}
         refreshing={this.state.refreshing}
         ...
     />
    }
};

score 0 · Answer 3 · answered Oct 17 '19 at 13:35

All this. uses refer a same class or function. Only use IF i'ts a child function, component or method. I'ts don't work out of class function original, you can make a bridge for share data or status. You can use redux for it and using stores for update screen state.

How can I reuse a function with this.setState and other component function in react native?

3 Answers3