Passing data to a modal in react native

Question

The data being fetched from the api is needed for other purposes in the modal. How do i pass data: {currency.data.prices[index].instrument} {currency.data.prices[index].closeoutAsk} {currency.data.prices[index].closeoutBid} that is in a component to a modal that is in the same component. Below is the code:

//HomeScreen 
    import React, {useContext, useState} from 'react'
    import { Text, View, ScrollView, TouchableOpacity, Modal, TextInput } from 'react-native'
    import {ListItem, Card, Button, Icon} from 'react-native-elements'
    //import CurrencyPair from '../../CurrencyPair'
    import {firebase} from '../../../firebase/config'
    import {CurrencyContext} from '../../../context/Context'
    import styles from '../LoginScreen/styles'
    
    function HomeScreen() {
    
        const currency = useContext(CurrencyContext);
        const [modalopen, setModalOpen] = useState(false)
    
    
    return (
            <ScrollView>
              <Modal
              visible={modalopen}
              animationType={"fade"}
              >
                <View style={styles.modal}>
                  <View>
                    <Text style={{textAlign: "center", fontWeight: "bold"}}>
                    CreateAlert
                  </Text>
                  <TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
                    <Text style={styles.buttonTitle}>OK</Text>
                  </TouchableOpacity>
    
                  </View>
                  
                  
                </View>
    
              </Modal>
            <Card>
                <Text style={{textAlign: "center"}}>
                    Welcome
                </Text>
                <Button title="Sign Out" type="outline" onPress ={() => firebase.auth().signOut()}/>
                <Button title="My Alerts"  onPress ={() =>navigation.navigate("AlertScreen") }/>
                
            </Card>
    
            <View>
                {currency.data.prices && currency.data.prices.map((prices, index) => {
                    return (
          <ListItem
            key={index}
            onPress = {() => setModalOpen(true)}
            bottomDivider>
            <ListItem.Content>
                <ListItem.Title>
                  
                {currency.data.prices[index].instrument}        {currency.data.prices[index].closeoutAsk}         {currency.data.prices[index].closeoutBid}
                </ListItem.Title>
            </ListItem.Content>
          </ListItem>     
                    )
                })
    }
            </View>
       
        </ScrollView>
    )
    }
    export default HomeScreen

//Context

import React, {createContext, useState, useEffect}from 'react'
import {ActivityIndicator} from 'react-native'
import axios from '../utils/axios'

const CurrencyContext = createContext();

const CurrencyProvider =(props) => {
    const [data, setData] = useState([])
    const [isLoading, setIsloading] = useState(true)

    useEffect(() => {
        const interval = setInterval(() => {
            const fetchpairs = async() => {
                const results = await axios.get('/v3/accounts/101-004-14328428-002/pricing?instruments=AUD_CAD%2CAUD_CHF%2CAUD_JPY%2CAUD_NZD%2CAUD_USD%2CCAD_CHF%2CCAD_JPY%2CCHF_JPY%2CEUR_AUD%2CEUR_CAD%2CEUR_CHF%2CEUR_GBP%2CEUR_NOK%2CEUR_NZD%2CEUR_USD%2CGBP_AUD%2CGBP_CAD%2CGBP_CHF%2CGBP_USD%2CGBP_JPY%2CNZD_CAD%2CNZD_CHF%2CNZD_JPY%2CUSD_CAD%2CUSD_JPY%2CUSD_CHF%2CUSD_ZAR%2CUSD_MXN')
                setData(results.data)
                setIsloading(false)
            }
            fetchpairs() 
        },1000)
      }, []);

      if(isLoading) {
        return (
            <ActivityIndicator size="large"/>
        )
    }else
    return (
        <CurrencyContext.Provider
        value={{
            data,
            setData,
            isLoading,
            setIsloading
        }}>
            {props.children}

        </CurrencyContext.Provider>

       
    )
}

export {CurrencyProvider, CurrencyContext}

Answer 1

you can create another state variable to store the clicked index.

const [clickedIndex, setClickedIndex] = useState(0);

then use that in the onPress event.

onPress = {() => {setModalOpen(true);setClickedIndex(index);}

then you can use this same index to display what you want in the modal.

         <Modal
          visible={modalopen}
          animationType={"fade"}
          >
            <View style={styles.modal}>
              <View>
                <Text style={{textAlign: "center", fontWeight: "bold"}}>
                {currency.data.prices[clickedIndex].instrument}
              </Text>
              <TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
                <Text style={styles.buttonTitle}>OK</Text>
              </TouchableOpacity>
              </View>
            </View>
          </Modal>