Flat list single item with two buttons - react-native

Question

A flat list displays information from an API, I want to add a delete button for each item. Where user can click on it and be able to delete this specific item.
Please check my code below.
<FlatList
numColumns={1}
data={this.state.allDocs}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => Linking.openURL('http://URL')}>
<Text>{item.docName}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={deleteFunction}>
<Text>Delete</Text>
</TouchableOpacity>
)}
keyExtractor={item => item.docName}
/>

Answer 1

import React, { Component } from "react";
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
TouchableOpacity
} from "react-native";
export default class Example extends Component {
state = {
data: [
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
title: "First Item"
},
{
id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
title: "Second Item"
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d72",
title: "Third Item"
}
]
};
renderItem = ({ item }) => {
return (
<View style={styles.item}>
<Text>{item.title}</Text>
<TouchableOpacity onPress={() => this.removeValue(item.id)}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
);
};
removeValue = id => {
let newData = this.state.data.filter(item => item.id !== id);
this.setState({
data: newData
});
};
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50
},
item: {
backgroundColor: "#f9c2ff",
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
flexDirection: "row",
justifyContent: "space-between"
}
});
Change this according to your requirements.
Hope this will helps you. Feel free for doubts.

Answer 2

You just need to pass a function that will remove the document from your state like this:
export default class FlatListExample extends Component {
_openDoc = async (index) => {
const { allDocs } = this.state;
Linking.openURL(allDocs[i].url);
}
_deleteDoc = (index) => {
const { allDocs } = this.state;
allDocs.splice(index, 1);
this.setState({ allDocs });
}
render() {
const { allDocs } = this.state;
return (
<FlatList
data={allDocs}
keyExtractor={item => item.docName}
renderItem={({ item, index }) => (
<Fragment>
<TouchableOpacity onPress={() => this._openDoc(index)}>
<Text>{item.docName}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this._deleteDoc(index)}>
<Text>Delete</Text>
</TouchableOpacity>
</Fragment>
)} />
);
}
}