Gabotronix's avatar

React Native: trying to pass a reference function via props

Hi everybody, I created a reusable FlatList component which implements pagination, I'm trying to pass via props a function which makes an axios call and retrieves data from backend to populate the FlatList, however I'm getting the following error:

TypeError: [endAction] is not a function

Also this one:

TypeError: [store][action] is not a function

This is how I pass props to my custom component:

<RList1 store='venueStore' action='getVenueReviews' endAction={venueStore.getVenueReviews} data={[]} renderItem={itemView}></RList1>

And this is how I call the function (two ways, both give me same TypeError...):

let response = [store][action]({ params : params });
let response = [endAction]({ params : params });

My full custom component, just in case:

export default RList1 = observer((props) => 
{
    
    const [ data, setData ] = useState([]);
    const [ loader, setLoader ] = useState(0);
    const [ page, setPage ] = useState(1);
    const [ paginate, setPaginate ] = useState(2);
    const [ pagination, setPagination ] = useState(null);
    const [ numberOfPages, setNumberOfPages ] = useState(10);

    const { id=1,store,action,endAction, ...rest } = props;

    useEffect(() => {
        console.log('RList1 mounted');
        onEndReached();
    }, []);

    const onEndReached = async () =>
    {
        if(page < numberOfPages)
        {
            setLoader(0);
            try 
            {
                setLoader(1);
                console.log('fetching data');
                let params = { id:id, page : page, paginate : paginate };
                let response = [store][action]({ params : params });
                //let response = [endAction]({ params : params });
                setData([...data, ...response.data.data.data]);
                setPagination(response.data.pagination);
                setNumberOfPages(response.data.pagination.last_page);
                setLoader(2);
            } 
            catch (error)
            {
                setLoader(3);
                throw error;
            }
        }
    };
    
    return(
    <View style={{ flex:1 }}>
        <FlatList  style={{ flex:1,backgroundColor:'rgb(235,235,235)'}}  data={data} keyExtractor={item => item.id.toString()} extraData={loader}
        onEndReached={ ()=>{ onEndReached() } } onEndReachedThreshold={0.1}
        {...rest}
        />
    </View>
    );
        

});
0 likes
0 replies

Please or to participate in this conversation.