Pass the data to the react native modal

Question

is anyone able to help pass the data to the modal? The .map function returns the month names from the data [] array (needed for the slider), and I'd like to display that particular one in a modal view as well.

Current view:

and modal:

expectations:

unfortunately, only the first month from the [] is visible in the modal.

I am also putting the .js file for review:

import React, { useContext, useState } from 'react';
import { AuthenticatedUserContext } from '../AuthenticatedUserProvider';
import { Swiper } from 'react-native-swiper';
import Modal from 'react-native-modal';
import { db } from '../firebase';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { View, Text, TouchableHighlight, StyleSheet, Button, TextInput, TouchableOpacity } from 'react-native';

const data = [
    { id: 1, name: 'Month1' },
    { id: 2, name: 'Month2' },
    { id: 3, name: 'Month3' }
];

export default function HomeScreen() {

    const { user } = useContext(AuthenticatedUserContext);

    const [ isModalVisible, setModalVisible ] = useState(false);
    const [ months, setMonths ] = useState(data);
    const [ values, setValues ] = useState({
        budget: '',
        month: '',
    });

    const toggleModal = () => {
        setModalVisible(!isModalVisible);
     
    };



    const onSave = () => {
        setValues({ ...values, userId: user.uid });
        setModalVisible(!isModalVisible);
        db.collection('Budget').add({
            userId: user.uid,
            budget: values.budget,
        });
    };

    return (
        <Swiper showsButtons={true} showsPagination={false} buttonWrapperStyle={{ alignItems: 'flex-start' }}>
            {months.map((months, i) => (
                <View key={i} style={styles.slider}>
                    <Text style={styles.text}> {months.name}</Text>
                    <View>
                        <View style={styles.mainCardView}>
                            <TouchableOpacity
                                onPress={
                                    toggleModal
                                }
                                style={{ flex: 1, alignItems: 'flex-end', marginTop: 20 }}
                            >
                                <FontAwesome name="pencil-square-o" color="black" size={30} />
                            </TouchableOpacity>
                        </View>
                    </View>
                    <Modal isVisible={isModalVisible} style={{ margin: 0 }}>
                        <Text style= {{marginLeft: 50, color: '#fff'}}>Current month: {months.name}</Text>
                        <TextInput
                            style={{
                                height: 40,
                                borderColor: 'white',
                                borderWidth: 1,
                                color: 'white',
                                shadowColor: 'white',
                                margin: 50,
                                padding: 5,
                                marginVertical: 10,
                            }}
                            onChange={(e) => setValues({ ...values, budget: e.target.value })}
                            value={values.budget}
                            placeholder="Budget"
                            keyboardType="decimal-pad"
                            placeholderTextColor="#fff"
                        />
                        <TouchableHighlight
                            style={{
                                height: 40,

                                borderRadius: 10,
                                backgroundColor: 'gray',
                                marginLeft: 50,
                                marginRight: 50,
                                marginTop: 20,
                            }}
                        >
                            <Button
                                onPress={onSave}
                                title="Confirm"
                            />
                        </TouchableHighlight>
                        <TouchableHighlight
                            style={{
                                height: 40,
                                borderRadius: 10,
                                backgroundColor: 'gray',
                                marginLeft: 50,
                                marginRight: 50,
                                marginTop: 20,
                            }}
                        >
                            <Button
                                onPress={toggleModal}
                                title="Back"
                            />
                        </TouchableHighlight>
                    </Modal>
                </View>
            ))}
        </Swiper>
    );
}

Answer 1

Here are a couple suggestions:

• {months.map((months, i) => (...))} I would not recommend using months as the current item in the map since its confusing. Instead, I would recommend something like months.map((month, i) => ())} since in actuality you are referring to just one month within the map.

• You are rendering the modal within your map, so each month has its own modal. But you only render one modal at a time, so instead you can just put the modal outside of the map, and somehow point the modal to the currently active month (see below)

• If you have another piece of state like const [activeMonth, setActiveMonth] = useState(). Then when you click one of the months you can set the modal state to open, and set the activeMonth state. Then in the modal, it would just display state based off the current active month. It seems like you can make use of your values state to do that probably!