How to pass item id to Swipeable to delete or edit item with this id

Question

Im using: react-native, expo,

react-native-gesture-handler/Swipeable

here is a code of screen https://github.com/ArturScwaiberov/react-native-dental-app/blob/master/screens/HomeScreen.js

In my app there is list of appointments rendered by SectionList.

In renderItem I created two buttons, one of them is to delete item.

So, I cant understand how should I pass appointment ID to renderRightActions to delete or edit this current appointment.. please help me find out the solution!

Here is my HomeScreen code review:

const HomeScreen = ({ navigation }) => {
    const [data, setData] = useState(null)
    const [refreshing, setRefreshing] = useState(false)

    const fetchAppointments = () => {
        setRefreshing(true)
        appointmentsApi
            .get()
            .then(({ data }) => {
                setData(data.message)
                setRefreshing(false)
            })
            .catch((e) => {
                setRefreshing(false)
                console.log(e)
            })
    }

    useEffect(fetchAppointments, [])

    const removeAppointment = (id) => {
        console.log(id)
        const result = data.map((group) => {
            group.data = group.data.filter((item) => item._id !== id)
            return group
        })
        setData(result)
        //appointmentsApi.remove(id)
    }

    renderRightAction = (text, color, x, progress) => {
        const trans = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [x, 0],
        })

        const pressHandler = () => {
            if (text === 'pencil') {
                alert('hey')
            } else {
                //but how to get over here the ID of item from SectionList?
                removeAppointment(id)
            }
        }

        return (
            <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
                <RectButton
                    style={{
                        alignItems: 'center',
                        flex: 1,
                        justifyContent: 'center',
                        backgroundColor: color,
                    }}
                    onPress={pressHandler}
                >
                    <ActionText>
                        <Octicons name={text} size={24} color='white' />
                    </ActionText>
                </RectButton>
            </Animated.View>
        )
    }

    renderRightActions = (progress) => (
        <RightButtonsHandler>
            {renderRightAction('pencil', '#B4C1CB', 160, progress)}
            {renderRightAction('trashcan', '#F85A5A', 80, progress)}
        </RightButtonsHandler>
    )

    return (
        <Container>
            <SectionList
                style={{ paddingLeft: 20, paddingRight: 20 }}
                sections={data}
                keyExtractor={(item, index) => item + index}
                renderItem={({ item }) => (
                    <Swipeable renderRightActions={renderRightActions} friction={2}>
                        <Appointment navigation={navigation} item={item} />
                    </Swipeable>
                )}
                renderSectionHeader={({ section: { title } }) => <SectionTitle>{title}</SectionTitle>}
                refreshControl={<RefreshControl refreshing={refreshing} onRefresh={fetchAppointments} />}
            />
            <PluseButton
                style={{
                    shadowColor: '#2A86FF',
                    shadowOffset: {
                        width: 0,
                        height: 4,
                    },
                    shadowOpacity: 0.3,
                    shadowRadius: 4.65,
                    elevation: 8,
                }}
                onPress={() => navigation.navigate('AddPatient')}
            >
                <Ionicons name='ios-add' size={32} color='white' />
            </PluseButton>
        </Container>
    )
}

Answer 1

You only need to pass the item id as a function param.

renderRightActions={(progress) => renderRightActions(progress, item.id)}

I made all changes. Try this code:

const HomeScreen = ({ navigation }) => {
    const [data, setData] = useState(null)
    const [refreshing, setRefreshing] = useState(false)

    const fetchAppointments = () => {
        setRefreshing(true)
        appointmentsApi
            .get()
            .then(({ data }) => {
                setData(data.message)
                setRefreshing(false)
            })
            .catch((e) => {
                setRefreshing(false)
                console.log(e)
            })
    }

    useEffect(fetchAppointments, [])

    const removeAppointment = (id) => {
        console.log(id)
        const result = data.map((group) => {
            group.data = group.data.filter((item) => item._id !== id)
            return group
        })
        setData(result)
        //appointmentsApi.remove(id)
    }

    renderRightAction = (text, color, x, progress, id) => {
        const trans = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [x, 0],
        })

        const pressHandler = () => {
            if (text === 'pencil') {
                alert('hey')
            } else {
                // but how to get over here the ID of item from SectionList?
                removeAppointment(id) // its simple! :)
            }
        }

        return (
            <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
                <RectButton
                    style={{
                        alignItems: 'center',
                        flex: 1,
                        justifyContent: 'center',
                        backgroundColor: color,
                    }}
                    onPress={pressHandler}
                >
                    <ActionText>
                        <Octicons name={text} size={24} color='white' />
                    </ActionText>
                </RectButton>
            </Animated.View>
        )
    }

    renderRightActions = (progress, id) => (
        <RightButtonsHandler>
            {renderRightAction('pencil', '#B4C1CB', 160, progress, id)}
            {renderRightAction('trashcan', '#F85A5A', 80, progress, id)}
        </RightButtonsHandler>
    )

    return (
        <Container>
            <SectionList
                style={{ paddingLeft: 20, paddingRight: 20 }}
                sections={data}
                keyExtractor={(item, index) => item + index}
                renderItem={({ item }) => (
                    <Swipeable renderRightActions={(progress) => renderRightActions(progress, item.id)} friction={2}>
                        <Appointment navigation={navigation} item={item} />
                    </Swipeable>
                )}
                renderSectionHeader={({ section: { title } }) => <SectionTitle>{title}</SectionTitle>}
                refreshControl={<RefreshControl refreshing={refreshing} onRefresh={fetchAppointments} />}
            />
            <PluseButton
                style={{
                    shadowColor: '#2A86FF',
                    shadowOffset: {
                        width: 0,
                        height: 4,
                    },
                    shadowOpacity: 0.3,
                    shadowRadius: 4.65,
                    elevation: 8,
                }}
                onPress={() => navigation.navigate('AddPatient')}
            >
                <Ionicons name='ios-add' size={32} color='white' />
            </PluseButton>
        </Container>
    )
}