Adding delete button in flat list react native

Question

I am trying to add one delete button at end of each list in flat list. Expected behaviour is to delete the list from the array.So i added on press method and called on alert to check wether its working fine or not.

Now when ever i am adding one items to my flat list.This alert pop up is coming. But on click my delete button pop up is not showing. Not sure whether i added in correct place or not.

I am new learner to react native.Please help.

                <FlatList
                    data={data.ingredientArray}
                    width='100%'
                    extraData={data.ingredientArray}
                    keyExtractor={(index) => index.toString()}
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    renderItem={({ item }) =>
                        <View style={styles.TextViewStyle}>
                            <View style={styles.row}>
                                <View style={styles.bullet}>
                                    <Text style={{ fontWeight: 'bold', fontSize: 16 }}>{'\u2022' + " "}</Text>
                                </View>
                                <View style={styles.bulletText}>
                                    <Text style={{ fontWeight: 'normal', fontSize: 16, color: '#009387' }}>{item.title}</Text>
                                </View>
                                <View>
                                </View>
                                <Feather
                                    name="x-circle"
                                    color="#009387"
                                    size={30}
                                    onPress={showAlert}
                                />
                            </View>
                        </View>
                    } />

My alert :

const showAlert = () => {
alert('alert me');
}

Any help on this ?

Answer 1

You can change the onPress={showAlert} to onPress={() => showAlert()} 👍🏽