How to remove an specific data from database using react native and php

Question

I'm a beginner with react native. In my react native project, I have this front-end.

Here, all these CIS, PST and all other data are retrieved from the database by creating a JSON object in PHP file. They are listed as shown and I have added a delete button for each data of database table as you can see in the photo. But I couldn't add a functionality to the delete button yet because I couldn't specify the data to the button. What I want is, if I click the delete button in front of CIS, delete CIS row only. If I click the delete button in front of PST, delete PST row only. How to specify that data to the button and delete it.

This is my react native code.

import React, { Component } from 'react';
import { AppRegistry, Text, AsyncStorage, StyleSheet, TextInput, View, Alert, Button, FlatList, TouchableOpacity } from 'react-native';

class MainProject extends Component {

constructor(props) {
    super(props)
    this.state = {
        name: ''
    };
    this.persistData = this.persistData.bind(this);
}

state = {
    data: []
};

persistData() {
    let name = this.state.name
    AsyncStorage.setItem('name', name).done();
    this.setState({ name: name, persistedName: name })
}

check() {
    AsyncStorage.getItem('name').then((name) => {
        this.setState({ name: name, persistedName: name })
    })
}

componentWillMount() {
    this.check();
    //this.fetchData();
}

fetchData = async () => {
    const response = await fetch('http:/192.168.182.131/test/select.php');
    const json = await response.json();
    this.setState({ data: json.results });
};

removeData = async () => {
    const response = await fetch('http:/192.168.182.131/test/delete.php');
    const json = await response.json();
    this.setState({ data: json.results });
};

InsertDataToServer = () => {
    const { name } = this.state;

    fetch('http:/192.168.182.131/test/submit_user_info.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({

            name: name

        })

    }).then((response) => response.json())
        .then((responseJson) => {
            // Showing response message coming from the server after inserting records.
            Alert.alert(responseJson);
        }).catch((error) => {
            console.error(error);
        });
}

render() {
    return (
        <View style={styles.MainContainer}>
            <TextInput
                // Adding hint in Text Input using Place holder.
                placeholder="Enter Name"
                onChangeText={name => this.setState({ name })}
                // Making the Under line Transparent.
                underlineColorAndroid='transparent'
                style={styles.TextInputStyleClass}
            />
            <Button title="SUBMIT" onPress={this.InsertDataToServer} color="#2196F3" />
            <Button title="VIEW ALL" onPress={this.fetchData} color="green" style={styles.ViewAll} />
            <View>
                <Text>STATE:</Text>
                <Text>Name: {this.state.name}</Text>
            </View>
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    keyExtractor={(x, i) => i}
                    renderItem={({ item }) =>
                        <View>
                            <View>
                                <Text>
                                    {`${item.name}`}
                                </Text>
                            </View>
                            <View>
                                <TouchableOpacity onPress={this.removeData}>
                                    <Text style={styles.button}>
                                        DELETE
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    }
                />
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({

MainContainer: {

    justifyContent: 'center',
    flex: 1,
    margin: 10
},

TextInputStyleClass: {

    textAlign: 'center',
    marginBottom: 7,
    height: 40,
    borderWidth: 1,
    // Set border Hex Color Code Here.
    borderColor: '#FF5722',
},

container: {
    marginTop: 15,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
},

ViewAll: {
    marginTop: 50
},

button: {
    borderColor: 'red',
    backgroundColor: 'red',
    width: 60,
    textAlign: 'center',
    borderRadius: 10,
    color: 'white'
  }

});

AppRegistry.registerComponent('albums', () => MainProject);

This is my PHP code to create the JSON object using database data.

<?php
include 'DBConfig.php';

$con = mysqli_connect($HostName, $HostUser, $HostPass, $DatabaseName);

$query = "SELECT * FROM Department ORDER BY id ASC"; 
$res = mysqli_query($con,$query) or die("Query Not Executed " . mysqli_error($con));

$data = array(); 
while($rows = mysqli_fetch_assoc($res)) {
    $data[] = $rows;
}

$write = json_encode(array('results' => $data));
echo $write;

mysqli_close($con);
?>

Answer 1

You need to pass an identifier to PHP. I recommend you to use your id for that. This means, you have to send you id to the client, and if you press on delete, you explicitly tell te server to delete this one id.

Your removeData function would have something like that in it:

fetch('http://192.168.182.131/test/delete.php', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        id: id
    })
})

This is not the best solution, but it should work. If you have some time, I also recommend you to take a look at CRUD.