React Native Function Outside Class Pass Item to Function Inside

Question

I have a Flatlist inside my default component, I want to perform an on item click with Touchables, when the item is touched it should get one of its items called "Source" and pass it to another function called "deleteImage". Now the problem is that my RenderItem (Which is called ItemAdImages) is outside the main component but the deleteImage is inside the component so it can't pass "Source" to deleteImage. my renderItem Code:

   Export Default Class ... Extends Component{
     render(){

return(

    <SafeAreaView style={{
                            marginBottom: 10, flex: 1,
                            alignContent: 'center'
                        }}>
                            <FlatList
                                data={this.state.avatarsArray}
                                renderItem={({item}) => <ItemAdImages
                                    source={item.source}
                                    data={item.data}
                                />}
                                numColumns={3}
                                keyExtractor={(item) => item.data}
                                contentContainerStyle={{margin: 0}}
                                extraData={this.state.itemImagesListRefresh}
                            />
                        </SafeAreaView>


             )//return
            }//render


    deleteImage(imageSource){

            console.log("image source is = " + imageSource)

            for(let i = 0; i < this.state.avatarsArray.length; i++){
                if (this.state.avatarsArray[i]['source'] === imageSource){
                    this.state.avatarsArray.splice(i, 1);
                    this.setState({itemImagesListRefresh: !this.state.itemImagesListRefresh})
                    console.log(this.state.avatarsArray)
                }
                else {
                    console.log(this.state.avatarsArray[i] + " Not It")
                }
            }

        }//deleteImage

     }//main component

and my renderItem function outside main component:

function ItemAdImages({source, data, id, state}) {

    return (

        <Container style={{height: 45, width: 90, backgroundColor: '#EEEEEE',
        margin: 10}}>
            <Content>
                <TouchableOpacity onPress={() => this.deleteImage(source)}>
                    <View >
                        <Image
                            //source= {{uri: "content://media/external/images/media/29"}}
                            source= {{uri: source}}
                            //source= {{uri : this.state.avatarsArray[0].source}}
                            //source= {{uri : this.state.avatarsArray[0].source}}
                            style={{width: 90, height: 45,
                                backgroundColor: '#FF9900'}} />
                    </View>
                </TouchableOpacity>
            </Content>
        </Container>

    ) }

The error is :

Guruparan Giritharan · Accepted Answer · 2020-06-06 05:47:24Z

2

You should pass the deleteimage function as a parameter to the item component

 renderItem={({item}) => <ItemAdImages
                                    source={item.source}
                                    data={item.data}
                                    deleteImage={this.deleteImage}
                                />}

And access it just like any other prop

function ItemAdImages({source, data, id, state, deleteImage}) {

return (

    <Container style={{height: 45, width: 90, backgroundColor: '#EEEEEE',
    margin: 10}}>
        <Content>
            <TouchableOpacity onPress={() => deleteImage(source)}>
                <View >
                    <Image
                        //source= {{uri: "content://media/external/images/media/29"}}
                        source= {{uri: source}}
                        //source= {{uri : this.state.avatarsArray[0].source}}
                        //source= {{uri : this.state.avatarsArray[0].source}}
                        style={{width: 90, height: 45,
                            backgroundColor: '#FF9900'}} />
                </View>
            </TouchableOpacity>
        </Content>
    </Container>

) }

answered Jun 6, 2020 at 5:47

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mr geek Over a year ago

Oh My Godddd You are a life saver! I've been stuck on this error for 3 days and your solution absolutely works! Thanks man, Thank you very much

CrackerKSR Over a year ago

This works thanks... but is it ok to use this for large list or large data?

Guruparan Giritharan Over a year ago

@CrackerKSR yes it should work fine

Collectives™ on Stack Overflow

React Native Function Outside Class Pass Item to Function Inside

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related