Flat list single item with two buttons

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.