Click here to Skip to main content
15,031,495 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Does someone know how to make it so that whatever image is clicked on, the modal data will show the correct data? My idea was to assign a value to the image component but I can't find anything helpful online. Thank you so so much in advance!

Here is an picture of the UI in the component and a picture of a modal:

link

What I have tried:

The entire shown code is within the loop:
for (let i in seriesList)

SeriesList stores some objects in another file. It works fine.

This is my image component:

<TouchableOpacity onPress={() => {setModalOpen(true)}}>     
<Image style={externalStyle.image} source={seriesList[i].uri}/>   
</TouchableOpacity>


I'm trying to display different data in Modal depending on the image pressed. It is showing the same data for every image. When I refresh the app it shows different data, but still the same data for each image at each press.

<Modal visible={modalOpen} animationType='slide'>   
    <View style={{backgroundColor: '#B6A3B0', flex: 1}}> 
        <TouchableOpacity onPress={() => {setModalOpen(false)}}>        
            <Image 
            style={{ width: 50, height: 50, left: 20, bottom: -50}}         
            source={require('../assets/removeblue.png')}/> 
        </TouchableOpacity> 
            <Image 
            style={externalStyle.image, {bottom: -70, left: 105}} 
            source={seriesList[i].uri}/> 
                <Text 
                    style={{ bottom: -90, color: 'black',fontFamily: 'MarkerFelt-Thin',fontSize: 25, textAlign: 'left'}}>
                Name:  {seriesList[i].name}
                </Text> 
                <Text 
                style={{ bottom: -120, color: 'black',fontFamily: 'MarkerFelt-Thin', fontSize: 25, textAlign: 'left'}}> 
                Year:  {seriesList[i].year}
                </Text> 
                <Text style={{ bottom: -150, color: 'black',fontSize: 25, textAlign: 'left', fontFamily: 'MarkerFelt-Thin'}}>
                Description:  {seriesList[i].description}
                </Text> 
     </View> 
</Modal>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900