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

861

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

enter image description here

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);
?>

People are also looking for solutions to the problem: php - How to save sub attribute in 3rd table in laravel

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.