How to loop and create modal for individual object & update data in react native?

Question

I am trying to figure out how to control the state of multiple modals in react native.

The number will depend on how many objects are being passed from the api.

let say this is the this example array is passed down from the api

const userArray = [
    {name: 'Sam', power: 0},
    {name: 'Tam', power: 0},
    {name: 'Lam', power: 0},
    {name: 'Bam', power: 0},
    {name: 'Jam', power: 0},
    {name: 'Yum', power: 0},
  ];

What I am doing now is looping this array with the array.map inside the function and returning the jsx.

The function is look like this.

const renderModal = (eachUser) => {
        return eachUser.map((user,index) => (
            <View>
                <Text>{user.name}</Text>

                <TouchableOpacity
            onPress={() => setModalOneVisible(true)}>
            <Text style={{color: 'gray'}}> QTY {modalOneValue}</Text>
          </TouchableOpacity>

                    
                <View style={styles.modalContainer}>
                        <Modal
                            animationType="slide"
                            transparent={true}
                            visible={modalOneVisible}
                            onRequestClose={() => {
                                setModalOneVisible(!modalOneVisible);
                            }}>
                            <ScrollView style={styles.centeredView}>
                                <View style={styles.modalView}>
                                    <Text style={styles.modalText}>Select the user</Text>
                                    {numbersArray.map((data, index) => (
                                        <TouchableOpacity
                                            key={index}
                                            style={
                                                index === numbersArray.length - 1
                                                    ? styles.modalNoBorderSelector
                                                    : styles.modalSelector
                                            }
                                            onPress={() => setModalOneValue(data)}>
                                            <Text style={styles.modalSelectorText}>{data}</Text>
                                        </TouchableOpacity>
                                    ))}
                                    <Pressable onPress={() => setModalOneVisible(false)}>
                                        <Text style={styles.modalCancel}>Cancel</Text>
                                    </Pressable>
                                </View>
                            </ScrollView>
                        </Modal>
                    </View>
            </View>
        ))
    }

As you can see I am controlling whether the modal is show or not by controlling the modalOneVisible state which is declared at the start of the component.

What this modal do is that when modal popup and user pressed a number a number.What I am doing now is when user press it the modalOneValue value state will be changed and the value will gonna be displayed,

I only want the the number to change for that particular user only.

What happening now is that When I pressed the button the number is updated for every user.

Answer 1

You are passing the same value modalOneValue to all the items you are creating with map that's why they are all showing the same value.

You need to create an array or an object in your state and save the individual values for each item. If you use an object for example it would be something like this:

setModalValues({...modalValues, [user.name]:  data); 

Then in your Text tag you'd read the value like this:

<Text style={{color: 'gray'}}> QTY {modalValues[user.name]}</Text>

I would also suggest you only create one instance of Modal and just update the values you display in the modal when each item is clicked rather than creating a Modal for each item.