RN-Gesture-Handler Swipeable issue with maximum call stack size exceeded

Question

I can't make the Swipeable component work with a button. It seems like it calls all button to render the action everything I click on one of them. Any idea what is wrong here ? Thank you

import { RectButton, Swipeable } from 'react-native-gesture-handler';
....
cars.map((car: any, index: number) => {
                    if(car.is_cancellable) {
                        return(
                            <Swipeable
                                key={index}
                                renderRightActions={() => {
                                    return(
                                        <RectButton style={styles.swipeable} onPress={() => cancelOrder(car.uuid)}>
                                           <Feather style={styles.icon} name="trash-2" size={32} color="white" />
                                        </RectButton>
                                    )
                                }}
                                rightThreshold={-300}
                                key={order.uuid}>
                                <TouchableOpacity onPress={() => selectOrder(car)}>
                                    <PortfolioOrder car={car} />
                                </TouchableOpacity>
                            </Swipeable>
                        )
                    })
}})


const cancelOrder = (id: string) => {
    console.log('press', id)
    cancelOrder({id})
}

Gives me this error after logging the same message 100+ times

RangeError: Maximum call stack size exceeded

Answer 1

const cancelOrder = (id: string) => {
    console.log('press', id)
    cancelOrder({id})// this line is causing problem because of recursion.
}