How can I pass the current item to a component in react-native?

Question

I'm trying to pass the currently clicked item to the React-Native's own Modal component with props, but without success. Now it will only show the same item in all the modals regardless of what item was pressed.

Homepage that renders content and passes the data for Modal component:

<HomepageDataView>
    {habitData !== null &&
        Object.values(habitData).map((item, index) => (
            <HomepageDataBox
                key={index.toString()}
                onPress={() => {
                    setModalVisible(true);
                    haptics.selection();
                }}
                style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
            >
                <Image style={{ height: 50, width: 50 }} source={item.icon} />
                <Text fontFamily="SemiBold" marginLeft="5px">
                    {item.name}
                </Text>

                <ShowHabitModal
                    data={item}
                    modalVisible={modalVisible}
                    setModalVisible={setModalVisible}
                />
            </HomepageDataBox>
        ))}
</HomepageDataView>

Modal component:

 export default function ShowHabitModal({ modalVisible, setModalVisible, data }) {
    return (
        <Modal animationType="slide" presentationStyle="pageSheet" visible={modalVisible}>
            <ModalContent>
                <HomeheaderContainer>
                    <TouchableOpacity
                        style={{ marginLeft: 10, marginTop: 10 }}
                        onPress={() => setModalVisible(false)}
                    >
                        <Ionicons name="close-circle-sharp" size={34} color="gray" />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Text marginRight="15px" color={colors.mainGreen} fontFamily="SemiBold">
                            Edit
                        </Text>
                    </TouchableOpacity>
                </HomeheaderContainer>
                <ShowHabitDataContainer>
                    <View style={showHabitImageBackground}>
                        <Image style={{ width: 90, height: 90 }} source={data.icon} />
                    </View>
                    {data.description !== '' && <Text>{data.description}</Text>}
                    <Text fontFamily="SemiBold" marginTop="15px" twentyEight>
                        {data.name}
                    </Text>
                    <Text>{data.days}</Text>
                    <Text>{data.times}</Text>
                </ShowHabitDataContainer>
            </ModalContent>
        </Modal>
    );
}

You are creating copy of modal for each item in your list. But all of them are controlled by one single modalVisible in the parent component. I think multiple modals are being opened one after the another in your case, one behind the other. — Kuncheria
– Kuncheria, Commented Sep 27, 2021 at 12:39
Hey, thank you for the reply. I want to pass the currentitem from the map function in parent to the child modal. Not open the modals one after the other. Any ideas? — niemax
– niemax, Commented Sep 27, 2021 at 12:59

wowandy · Accepted Answer · 2021-09-27 13:31:47Z

Kuncheria is right. You have few modals open at the same time.

If you need to create few modals, try something like this:

const HomePage = () => {
    const [visibleItem, setVisibleItem] = useState();

    return <HomepageDataView>
        {habitData !== null && Object.values(habitData).map((item, index) => {
            const id = index.toString();
            return (
                <HomepageDataBox
                    key={id}
                    onPress={() => {
                        setVisibleItem(id);
                        haptics.selection();
                    }}
                    style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
                >
                    <Image style={{ height: 50, width: 50 }} source={item.icon} />
                    <Text fontFamily="SemiBold" marginLeft="5px">
                        {item.name}
                    </Text>

                    <ShowHabitModal
                        data={item}
                        modalVisible={visibleItem === id}
                        setModalVisible={setVisibleItem}
                    />
                </HomepageDataBox>
            );      
        })}
    </HomepageDataView>
};

const ShowHabitModal = ({ modalVisible, setModalVisible, data }) => (
    <Modal animationType="slide" presentationStyle="pageSheet" visible={modalVisible}>
        <ModalContent>
            <HomeheaderContainer>
                <TouchableOpacity
                    style={{ marginLeft: 10, marginTop: 10 }}
                    onPress={() => setModalVisible(false)}
                >
                    <Ionicons name="close-circle-sharp" size={34} color="gray" />
                </TouchableOpacity>
                <TouchableOpacity>
                    <Text marginRight="15px" color={colors.mainGreen} fontFamily="SemiBold">
                        Edit
                    </Text>
                </TouchableOpacity>
            </HomeheaderContainer>
            <ShowHabitDataContainer>
                <View style={showHabitImageBackground}>
                    <Image style={{ width: 90, height: 90 }} source={data.icon} />
                </View>
                {data.description !== '' && <Text>{data.description}</Text>}
                <Text fontFamily="SemiBold" marginTop="15px" twentyEight>
                    {data.name}
                </Text>
                <Text>{data.days}</Text>
                <Text>{data.times}</Text>
            </ShowHabitDataContainer>
        </ModalContent>
    </Modal>
);

If you can use a single modal, then try something like this:

const HomePage = () => {
    const [modalVisible, setModalVisible] = useState();
    const [visibleItem, setVisibleItem] = useState();

    return <HomepageDataView>
        {habitData !== null && Object.values(habitData).map((item, index) => {
            const id = index.toString();
            return (
                <HomepageDataBox
                    key={id}
                    onPress={() => {
                        setVisibleItem(item);
                        setModalVisible(true);
                        haptics.selection();
                    }}
                    style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
                >
                    <Image style={{ height: 50, width: 50 }} source={item.icon} />
                    <Text fontFamily="SemiBold" marginLeft="5px">
                        {item.name}
                    </Text>
                </HomepageDataBox>
            );      
        })}
        <ShowHabitModal
            data={visibleItem}
            modalVisible={modalVisible}
            setModalVisible={setModalVisible}
        />
    </HomepageDataView>
};

const ShowHabitModal = ({ modalVisible, setModalVisible, data }) => (
    <Modal animationType="slide" presentationStyle="pageSheet" visible={modalVisible}>
        <ModalContent>
            <HomeheaderContainer>
                <TouchableOpacity
                    style={{ marginLeft: 10, marginTop: 10 }}
                    onPress={() => setModalVisible(false)}
                >
                    <Ionicons name="close-circle-sharp" size={34} color="gray" />
                </TouchableOpacity>
                <TouchableOpacity>
                    <Text marginRight="15px" color={colors.mainGreen} fontFamily="SemiBold">
                        Edit
                    </Text>
                </TouchableOpacity>
            </HomeheaderContainer>
            <ShowHabitDataContainer>
                <View style={showHabitImageBackground}>
                    <Image style={{ width: 90, height: 90 }} source={data.icon} />
                </View>
                {data.description !== '' && <Text>{data.description}</Text>}
                <Text fontFamily="SemiBold" marginTop="15px" twentyEight>
                    {data.name}
                </Text>
                <Text>{data.days}</Text>
                <Text>{data.times}</Text>
            </ShowHabitDataContainer>
        </ModalContent>
    </Modal>
);

Collectives™ on Stack Overflow

How can I pass the current item to a component in react-native?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related