How to get data on flatlist using the button click?

Question

This is my 1st application using React_native.

In my application, I have a flatlist. it is a dynamic flatlist, that flatlist will be listed with API data. once flatlist updated user can change the data (Remark and Validity values). If the user updated something I want to get back all the list items once the user clicks on the NEXT button(refer ui image => Green Button).

eg : (following should be generated once the user clicks on the green button)

[{
  description : "E",
  validity : "YES",
  Remark : "Hello"
},{
  description : "D",
  validity : "NO",
  Remark : "asddddd"
},,{
  description : "A",
  validity : "YES",
  Remark : "asdas"
},{
  description : "C",
  validity : "NO",
  Remark : "asdasd"
},{
  description : "B",
  validity : "YES",
  Remark : null
}]

My UI as follows and I have attached my code below, Please help me to find a solution for this. Thanks in advance.

UI

code /

Server Response

"ChecklistsDTOS": [
            {
                "chelistid": 231,
                "ireqstId": 5,
                "checklistName": "D",
                "validity": "Invalid",
                "remark": "asddddd"
            },
            {
                "chelistid": 228,
                "ireqstId": 5,
                "checklistName": "A",
                "validity": "Valid",
                "remark": "asdas"
            },
            {
                "chelistid": 230,
                "ireqstId": 5,
                "checklistName": "C",
                "validity": "Valid",
                "remark": "asdasd"
            },
            {
                "chelistid": 229,
                "ireqstId": 5,
                "checklistName": "B",
                "validity": "Invalid",
                "remark": null
            },
            {
                "chelistid": 232,
                "ireqstId": 5,
                "checklistName": "E",
                "validity": "Invalid",
                "remark": null
            }
        ],

InspectionCheckList.tsx

import React, { useState, useEffect } from "react";
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    ActivityIndicator
} from 'react-native';
// import Picker2 from "react-native-community/picker";
import ComponentStyles, { COLORS, FONT_FAMILY } from "../../../../constants/Component.styles";
import ActionButton from "../../../../components/ActionButton";
import InspectionCheckListItem from './InspectionCheckListRow';
// importing database
import Database from '../../../../database/Database';
// singleton object
import InspectionChecklistDataManagert from '../../../../models/InspectionChecklistModel';

type props = {}

const InspectionCheckList = props => {
    const db = new Database();
    let checkListSingleton = InspectionChecklistDataManagert.getInstance();
    //add new array that will carry the yes values
    const [arrayOfYes, setArrayOfYes] = useState([]);

    const [checkLisItems, setCheckListItems] = useState({
        isLoading: true,
        checklistData: null,
    });

    useEffect(() => {
        db.getCheckListByReferenceNumber(props.referenceNumberForCheckList).then((data) => {
            console.log("999999999999999999999o9 : " + JSON.parse(data._checklist));
            setCheckListItems({
                isLoading: false,
                checklistData: JSON.parse(data._checklist),
            });
        }).catch((err) => {
            console.log(err);
        })
    }, []);

    //Modify yes clicked by pushing the clicked yes into the new array
    const yesClicked = (element) => {
        setArrayOfYes([...arrayOfYes, element]);
    }

    //Modify no clicked by remove the clicked no if it exists in the array
    const noClicked = (element) => {
        const index = arrayOfYes.findIndex(x => x.chelistid === element.
            chelistid)
        if (index !== -1) {
            //Remove the element from the array
            var modifiedArray = [...arrayOfYes]
            modifiedArray.splice(index, 1);
            setArrayOfYes(modifiedArray)
        }
    }

    const previousTab = () => {
        props.navigation.navigate('Location confirmation');
    }

    const nextTab = () => {
        // props.navigation.navigate('Photo upload');
        updateSingleton();
    }

    const updateSingleton = () => {
        let data = {
            "chelistid": 232,
            "ireqstId": 5,
            "checklistName": "E",
            "validity": "Invalid",
            "remark": null
        }
        checkListSingleton.setCheckList(arrayOfYes);
        console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% " + JSON.stringify(checkListSingleton.getCheckList()));
        console.log("################# " + JSON.stringify(arrayOfYes));
    }


    if (checkLisItems.isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size='large' />
            </View>
        )
    }

    return (
        <View style={styles.mainContainer}>
            <View style={styles.columnView}>
                <Text style={styles.contentTitle}>Inspection of pharmacies</Text>
                <Text style={styles.contentSubTitle}>Checklist:</Text>

                <View style={styles.rowView}>
                    <View style={{ flex: 1, alignSelf: 'center' }} >
                        <Text style={styles.tableText}>Description</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'center' }} >
                        <Text style={styles.tableText}>Validiry</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'center' }} >
                        <Text style={styles.tableText}>Remark</Text>
                    </View>
                </View>
            </View>

            <View style={ComponentStyles.SEPARATE_LINE} />

            <View style={{ flex: 4 }}>
                <FlatList
                    showsHorizontalScrollIndicator={false}
                    data={checkLisItems.checklistData}
                    renderItem={({ item }) => {
                        return (
                            <InspectionCheckListItem
                                itemData={item}
                                yesClicked={() => yesClicked(item)}
                                noClicked={() => noClicked(item)}
                                //now check if the current item exists in the array by finding the index
                                isYesButtonEnabled={arrayOfYes.findIndex(x => x.chelistid === item.
                                    chelistid) !== -1} //If the index = -1 that means the item doesn't exist 
                                isNoButtonEnabled={arrayOfYes.findIndex(x => x.chelistid === item.
                                    chelistid) == -1} //If The element is not yes then it is no
                            />
                        );
                    }}
                    keyExtractor={item => `${item.chelistid}`}
                />
            </View>

            <View style={styles.actionButton}>
                <ActionButton
                    title={'Previous'}
                    color={COLORS.PINK}
                    customBtnStyle={{
                        height: 65,
                        width: '85%',
                    }}
                    onPress={() => previousTab()}
                />
                <ActionButton
                    title={'Next'}
                    color={COLORS.GREEN_42}
                    customBtnStyle={{
                        height: 65,
                        width: '100%',
                    }}
                    onPress={() => nextTab()}
                />
            </View>

        </View>
    );
}

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        flexDirection: 'column'
    },
    contentTitle: {
        fontSize: 20,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.REGULAR,
    },
    contentSubTitle: {
        fontSize: 20,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.BOLD,
    },
    contentText: {
        flex: 3,
        fontSize: 12,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
    },
    columnView: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    rowView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: '5%'
    },
    tableText: {
        fontSize: 20,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    actionButton: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end',
        position: 'relative',
        bottom: '2%',
        left: 0,
    }
});

export default InspectionCheckList;

InsprctionCheckListItem.tsx

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import { COLORS, FONT_FAMILY } from '../../../../constants/Component.styles';

type props = {
    isYesButtonEnabled?: boolean;
    isNoButtonEnabled?: boolean;
    yesClicked?: () => void;
    noClicked?: () => void;
}

const InsprctionCheckListItem = props => {
    return (
        <View style={styles.container}>
            <View style={{ flex: 1, alignSelf: 'center' }} >
                <Text style={styles.allText}>{props.itemData.checklistName}</Text>
            </View>
            <View style={{ flex: 1, flexDirection: 'row', alignSelf: 'center', justifyContent: 'center' }} >
                <TouchableOpacity style={props.isYesButtonEnabled ? styles.yesButtonClicked : styles.touchButton} onPress={props.yesClicked}>
                    <Text style={styles.touchButtonWithoutClick}>YES</Text>
                </TouchableOpacity>
                <TouchableOpacity style={props.isNoButtonEnabled ? styles.noButtonClicked : styles.touchButton} onPress={props.noClicked}>
                    <Text style={styles.touchButtonWithoutClick}>NO</Text>
                </TouchableOpacity>
            </View>
            <View style={{ flex: 1 }} >
                <TextInput style={styles.textInput} onChangeText={props.changedText} defaultValue={props.itemData.remark}/>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        marginTop: '3%',
    },
    allText: {
        fontSize: 20,
        color: COLORS.BLUE_2C,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    textInput: {
        fontSize: 20,
        color: COLORS.BLUE_2C,
        fontFamily: FONT_FAMILY.LIGHT,
        borderRadius: 5,
        backgroundColor: COLORS.WHISPER,
    },
    checkboxText: {
        fontSize: 12,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center',
        margin: '1%'
    },
    touchButton: {
        width: 80,
        height: 40,
        borderRadius: 5,
        borderWidth: 0.8,
        borderColor: COLORS.ASH_AE,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center',
        margin: '0.2%',
        backgroundColor: COLORS.ASH_AE,
    },
    yesButtonClicked: {
        width: 80,
        height: 40,
        borderRadius: 5,
        borderWidth: 0.8,
        borderColor: COLORS.GREEN_42,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center',
        backgroundColor: COLORS.GREEN_42,
    },
    noButtonClicked: {
        width: 80,
        height: 40,
        borderRadius: 5,
        borderWidth: 0.8,
        borderColor: COLORS.PINK,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center',
        backgroundColor: COLORS.PINK,
    },
    touchButtonWithoutClick: {
        fontSize: 14,
        color: COLORS.WHITE,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center'
    },
    touchButtonWithClick: {
        fontSize: 14,
        backgroundColor: COLORS.PINK,
        color: COLORS.WHITE,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center'
    }
});

export default InsprctionCheckListItem;

Answer 1

I don't exactly know what you need to send to the API when you hit the next button, can you give to me more details? What you mean by "FlatList" data? You want the text that is in each component? What data of the FlatList you want? If you want just they arrayOfYes you need to send it to the API and you're ready. Waiting for your feedback. Thx :).