Use a function sent from Flatlist to a sub component

Question

I'm trying to use a function from a class into another, when dealing with Flatlist.

Here is my class where my flatlist is :

_displayDetailsForMyItem = (idItem, type) => {
        this.props.navigation.navigate('ItemDetails', { idMyItem: idItem, type: type })
    }

    _displayDataList(){
        const type = this.props.route.params?.type ?? 'defaultValue'

        if (type === 'Money') {
            return this.state.moneyList
        } else if (type === 'Stuff') {
            return this.state.stuffList
        } else {
            return this.state.peopleList
        }
    }

    _deleteItem = (idItem, type) => {
        alert('Delete button pressed')
    }

    render(){
        const type = this.props.route.params?.type ?? 'defaultValue'

        if(this.state.isLoading){
            return(
              <View style={styles.activity}>
                <ActivityIndicator size="large" color="#ED6D6D"/>
              </View>
            )
        }

        return(
            <FlatList
                style={styles.list}
                data={this._displayDataList()}
                keyExtractor={(item) => item.key.toString()}
                renderItem={({item}) => <MyItem 
                    myItem={item}
                    itemType={type}
                    displayDetailsForMyItem={this._displayDetailsForMyItem}
                    deleteItem={(item) => this._deleteItem(item.id, type)}/>}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                }}
            />
        )
    }

I don't put all the code since it's not relevant.

In another class I have the item part of my code.

render(){
        const { myItem, displayDetailsForMyItem } = this.props

        let ptfPrefix
        (Platform.OS === 'android') ? ptfPrefix = 'md-' : ptfPrefix = 'ios-'
        const calIconName = ptfPrefix + 'calendar'
        const titleIconName = ptfPrefix + 'create'
        const pplIconName = ptfPrefix + 'contact'

        const RightActions = (progress, dragX) => {
            const scale = dragX.interpolate({
              inputRange: [-100, 0],
              outputRange: [0.7, 0]
            })

            return (
              <>
                <TouchableOpacity onPress={() => deleteItem(myItem.key, 'toto')}>
                  <View
                    style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center' }}>
                    <Animated.Text
                      style={{
                        color: 'white',
                        paddingHorizontal: 20,
                        fontWeight: '600',
                        transform: [{ scale }]
                      }}>
                      <Ionicons name='ios-trash' size={70} color='#FFFFFF' />
                    </Animated.Text>
                  </View>
                </TouchableOpacity>
              </>
            )
        }

        return(
            <Swipeable renderRightActions={RightActions}>
                <TouchableOpacity 
                    style={styles.main_container}
                    onPress={() => displayDetailsForMyItem(myItem.key)}>

                    <View style={styles.first_line}>
                        <View style={styles.left_part_container}>
                            <View style={styles.date_container}>
                                <Image style={styles.date_bg} source={require('../assets/icons/list_bg.png')} />
                                <Ionicons name={calIconName} style={styles.top_left_elmnts} />
                                <Moment style={styles.top_left_elmnts} element={Text} format="DD/MM/YYYY" date={myItem.date} />
                            </View>
                        </View>
                        <View style={styles.right_part_container}>
                            <Text style={styles.top_right_elmnts}>{myItem.title}</Text>
                            <Ionicons name={titleIconName} style={styles.top_right_elmnts} />
                        </View>
                    </View>

                    <View style={styles.main_data}>
                        <Text style={styles.main_text}>
                            {(this.props.itemType === 'Money') ? myItem.amount + " €" : myItem.quantity + " Objets"}
                        </Text>
                    </View>

                    <View style={styles.last_row}>
                        <View style={styles.left_part_container}>
                            <Ionicons name={pplIconName} style={styles.btm_left_elmnts} />
                            <Text style={styles.btm_left_elmnts}>{myItem.people}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </Swipeable>
        )
    }

So here, I pass 2 functions from the Flatlist class to the Item Class (two distinct .js files for me). The displayDetailsForMyItem(myItem.key) function is correctly working (seems that it's because I'm calling it from the HTML part).

The fact is I would like to be able to call the second function deleteItem from outside the render() part (within the onPress() of the TouchableOpacity which is in the const RightActions), but I have an error telling :

can't find variable: deleteItem

I'm stuck

Answer 1

Ok I just didn't test all the possibilities.

Just have to call this.props.myFunction() instead of just myFunction (which is working inside the HTML part)