How to pass data item to react native modal

Question

I am trying to pass data item to a react native modal on a click of a button 'view modal' but it seems I am missing something in my code.

Here is the data object that is been looped to show on the timeline screen

Object {
  "farmer_id": "4",
  "farmer_name": "Joshua Adebisi",
  "id": "4",
  "product_description": "The grains of rice is good for healthy.It is durable,I
t is Awesome Intesrest buyers can contact via contact 08073047104.",
  "product_image": "https://via.placeholder.com/600/cb47e2",
  "product_name": "5kg Grains of Rice",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-10 23:48:04",
}
Object {
  "farmer_id": "3",
  "farmer_name": "Omolewa Stephen",
  "id": "3",
  "product_description": "The grains of rice is good for healthy.It is durable,I
t is Awesome Intesrest buyers can contact via contact 08073047104.",
  "product_image": "https://via.placeholder.com/600/4dcdf6",
  "product_name": "5kg Grains of Rice",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-10 23:48:04",
}
Object {
  "farmer_id": "2",
  "farmer_name": "Salami Paul",
  "id": "2",
  "product_description": "The grains of rice is good for healthy.It is durable,I
t is Awesome Intesrest buyers can contact via contact 08073047104.",
  "product_image": "https://via.placeholder.com/600/cb47e2",
  "product_name": "5kg Grains of Rice",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-10 23:48:04",
}
Object {
  "farmer_id": "1",
  "farmer_name": "Adebiyi Samuel",
  "id": "1",
  "product_description": "The grains of rice is good for healthy.It is durable,T
he grains of rice is good for healthy.It is durable.It is Awesome Intesrest buye
rs can contact via contact 08073047104.

",
  "product_image": "https://via.placeholder.com/600/4dcdf6",
  "product_name": "5kg Grains of Beans",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-11 02:56:53",
}

Here is the timeline code

import React, {Component} from 'react';
import {TextInput,Modal,Alert,TouchableHighlight,StyleSheet,RefreshControl ,ScrollView,Dimensions,Image,StatusBar,ActivityIndicator,Text, View,TouchableOpacity,KeyboardAvoidingView} from 'react-native';
import { createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer} from "react-navigation";
let {height, width} = Dimensions.get('window');
import { Ionicons } from '@expo/vector-icons';
import { Font } from 'expo';
import { AsyncStorage } from 'react-native';
export default class Timeline extends Component {
  constructor(props){
    super(props)
    console.log(props)
    this.state = {
      username: '',
      photo: '',
      email: '',
      userId: '',
      address: '',
      timeline: [],
      modalVisible: false,
      refreshing: false
    }
  }
 setModalVisible(visible) {
   this.setState({modalVisible: visible});
 }
  Home = () => {
    alert("Home");
  }
  PostTimeline = () => {
    return fetch( "http://texotrack.com/api/user/timeline.php", {
      method: "POST",
      headers:{
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'fetch'
      })
    }).then((response) => response.json()).then((responseJsonFromServer) => {
        this.setState({
          timeline: responseJsonFromServer
        });
    })
  }

componentDidMount(){
    this.PostTimeline();
    AsyncStorage.getItem("key").then((data) =>{
      const val = JSON.parse(data);
      this.setState({
        username: data.name,
        photo: data.photo,
        email: data.email,
        userId: data.id,
        address: data.address
      })
    })
  }

  render() {
        const timeLineList = this.state.timeline.map((data) => {
          console.log(data);
        const thumbnail = data.profile_img;
        const product_image = data.product_image;
        return (
          <View elevation={5} key={data.id} style={styles.card}>
          <Modal
              animationType="fade"
              transparent={false}
              visible={this.state.modalVisible}
              key={data.id}
              onRequestClose={() => {
                  alert('Modal has been closed.');
               }}>
              <View style={{margin: 10}}>
                <Text style={styles.headerText}>Product details: {data.product_name}</Text>
                <View style={styles.cardheader}>
                  <View style={styles.miniheader}>
                    <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                    <Text style={styles.thumb_name}>{data.farmer_name}</Text>
                  </View>
                  <Text style={styles.timestamp}>{data.uploaded_time}</Text>
                </View>
                <View style={styles.cardbody}>
                  <Image style={styles.cardbody_image} source={{uri: product_image}}/>
                   <Text style={styles.p_name}>{data.product_name}</Text>
                   <Text style={styles.p_desc}>{data.product_description}</Text>
                 <View>
                 </View>
                 </View>

                  <TouchableHighlight
                    onPress={() => {
                      this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text>Close</Text>
                  </TouchableHighlight>
                </View>

           </Modal>
            <View style={styles.cardheader}>
              <View style={styles.miniheader}>
                <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                <Text style={styles.thumb_name}>{data.farmer_name}</Text>
              </View>
              <Text style={styles.timestamp}>{data.uploaded_time}</Text>
            </View>
            <View style={styles.cardbody}>
              <Image style={styles.cardbody_image} source={{uri: product_image}}/>
             <Text style={styles.p_name}>{data.product_name}</Text>
             <Text style={styles.p_desc}>{data.product_description}</Text>
             <View>
             <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(true);
                }} style={styles.buttonContainer}>
                <Text style={styles.buttonText}>Show Modal</Text>
              </TouchableOpacity>
             </View>
            </View>
          </View>
        )
      });

      return (
        <View style={styles.container}>
            <View elevation={5} style={styles.mainheader}>
               <Text style={styles.iconTop} onPress={() => this.PostTimeline()}>
                  <Ionicons name="md-refresh" size={32} color="black" />
               </Text>
               <Text style={styles.headerTitle}>Home</Text>
               <Text style={styles.iconTop} onPress={() => this.Home()}>
                  <Ionicons name="md-home" size={32} color="black" />
               </Text>
            </View>

            <View style={styles.content}>
               <View style={{padding: 10}}>
                 <Text style={styles.headerText}><Ionicons name="md-cart"  size={26} color="black" /> Marketplace</Text>
               </View>
               <View style={{flex:1}}>
                 <ScrollView alwaysBounceVertical={true} contentContainerStyle={{ flexGrow: 1}} enabled bounces={true}>
                  {timeLineList}
                 </ScrollView>
               </View>
            </View>
        </View>
      );
    }

  }

The focus is on the render method here with the modal, how do I pass the data item to the modal when each button is clicked to view the details. Thanks

  render() {
        const timeLineList = this.state.timeline.map((data) => {
          console.log(data);
        const thumbnail = data.profile_img;
        const product_image = data.product_image;
        return (
          <View elevation={5} key={data.id} style={styles.card}>
          <Modal
              animationType="fade"
              transparent={false}
              visible={this.state.modalVisible}
              key={data.id}
              onRequestClose={() => {
                  alert('Modal has been closed.');
               }}>
              <View style={{margin: 10}}>
                <Text style={styles.headerText}>Product details: {data.product_name}</Text>
                <View style={styles.cardheader}>
                  <View style={styles.miniheader}>
                    <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                    <Text style={styles.thumb_name}>{data.farmer_name}</Text>
                  </View>
                  <Text style={styles.timestamp}>{data.uploaded_time}</Text>
                </View>
                <View style={styles.cardbody}>
                  <Image style={styles.cardbody_image} source={{uri: product_image}}/>
                   <Text style={styles.p_name}>{data.product_name}</Text>
                   <Text style={styles.p_desc}>{data.product_description}</Text>
                 <View>
                 </View>
                 </View>

                  <TouchableHighlight
                    onPress={() => {
                      this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text>Close</Text>
                  </TouchableHighlight>
                </View>

           </Modal>
            <View style={styles.cardheader}>
              <View style={styles.miniheader}>
                <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                <Text style={styles.thumb_name}>{data.farmer_name}</Text>
              </View>
              <Text style={styles.timestamp}>{data.uploaded_time}</Text>
            </View>
            <View style={styles.cardbody}>
              <Image style={styles.cardbody_image} source={{uri: product_image}}/>
             <Text style={styles.p_name}>{data.product_name}</Text>
             <Text style={styles.p_desc}>{data.product_description}</Text>
             <View>
             <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(true);
                }} style={styles.buttonContainer}>
                <Text style={styles.buttonText}>Show Modal</Text>
              </TouchableOpacity>
             </View>
            </View>
          </View>
        )
      });

      return (
        <View style={styles.container}>
            <View elevation={5} style={styles.mainheader}>
               <Text style={styles.iconTop} onPress={() => this.PostTimeline()}>
                  <Ionicons name="md-refresh" size={32} color="black" />
               </Text>
               <Text style={styles.headerTitle}>Home</Text>
               <Text style={styles.iconTop} onPress={() => this.Home()}>
                  <Ionicons name="md-home" size={32} color="black" />
               </Text>
            </View>

            <View style={styles.content}>
               <View style={{padding: 10}}>
                 <Text style={styles.headerText}><Ionicons name="md-cart"  size={26} color="black" /> Marketplace</Text>
               </View>
               <View style={{flex:1}}>
                 <ScrollView alwaysBounceVertical={true} contentContainerStyle={{ flexGrow: 1}} enabled bounces={true}>
                  {timeLineList}
                 </ScrollView>
               </View>
            </View>
        </View>
      );
    }

And if there is a better way to refactor this code, I am open to learning. Thanks

Answer 1

I have quickly changed your code to give you the idea of how this could work checkout below this should work.

No need to loop the modal set the data to the state when button is pressed and modal can read the data from the state.

 import React, {Component} from 'react';
import {TextInput,Modal,Alert,TouchableHighlight,StyleSheet,RefreshControl ,ScrollView,Dimensions,Image,StatusBar,ActivityIndicator,Text, View,TouchableOpacity,KeyboardAvoidingView} from 'react-native';
import { createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer} from "react-navigation";
let {height, width} = Dimensions.get('window');
import { Ionicons } from '@expo/vector-icons';
import { AsyncStorage } from 'react-native';
export default class Timeline extends Component {
  constructor(props){
    super(props)
    console.log(props)
    this.state = {
      username: '',
      photo: '',
      email: '',
      userId: '',
      address: '',
      timeline: [],
      modalVisible: false,
      refreshing: false,
      selectedData: [],
    }
  }
 setModalVisible(visible) {
   this.setState({modalVisible: visible});
 }
  Home = () => {
    alert("Home");
  }
  PostTimeline = () => {
    return fetch( "http://texotrack.com/api/user/timeline.php", {
      method: "POST",
      headers:{
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'fetch'
      })
    }).then((response) => response.json()).then((responseJsonFromServer) => {
        this.setState({
          timeline: responseJsonFromServer
        });
    })
  }

componentDidMount(){
    this.PostTimeline();
    AsyncStorage.getItem("key").then((data) =>{
      const val = JSON.parse(data);
      this.setState({
        username: data.name,
        photo: data.photo,
        email: data.email,
        userId: data.id,
        address: data.address
      })
    })
  }

  _selectedItem = (data) => {
    this.setState({selectedData: data});
    this.setModalVisible(true);
  }

  render() {
        const data = this.state.selectedData
        const timeLineList = this.state.timeline.map((data) => {
          console.log(data);
        const thumbnail = data.profile_img;
        const product_image = data.product_image;
        return (
          <View elevation={5} key={data.id} style={styles.card}>
            <View style={styles.cardheader}>
              <View style={styles.miniheader}>
                <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                <Text style={styles.thumb_name}>{data.farmer_name}</Text>
              </View>
              <Text style={styles.timestamp}>{data.uploaded_time}</Text>
            </View>
            <View style={styles.cardbody}>
              <Image style={styles.cardbody_image} source={{uri: product_image}}/>
             <Text style={styles.p_name}>{data.product_name}</Text>
             <Text style={styles.p_desc}>{data.product_description}</Text>
             <View>
             <TouchableOpacity
                onPress={() => {
                  this._selectedItem(data);
                }} style={styles.buttonContainer}>
                <Text style={styles.buttonText}>Show Modal</Text>
              </TouchableOpacity>
             </View>
            </View>
          </View>
        )
      });

      return (
        <View style={styles.container}>
            <View elevation={5} style={styles.mainheader}>
               <Text style={styles.iconTop} onPress={() => this.PostTimeline()}>
                  <Ionicons name="md-refresh" size={32} color="black" />
               </Text>
               <Text style={styles.headerTitle}>Home</Text>
               <Text style={styles.iconTop} onPress={() => this.Home()}>
                  <Ionicons name="md-home" size={32} color="black" />
               </Text>
            </View>

            <View style={styles.content}>
               <View style={{padding: 10}}>
                 <Text style={styles.headerText}><Ionicons name="md-cart" size={26} color="black" /> Marketplace</Text>
               </View>
               <View style={{flex:1}}>
                 <ScrollView alwaysBounceVertical={true} contentContainerStyle={{ flexGrow: 1}} enabled bounces={true}>
                  {timeLineList}
                 </ScrollView>
               </View>
            </View>

            <Modal
                animationType="fade"
                transparent={false}
                visible={this.state.modalVisible}
                key={data.id}
                onRequestClose={() => {
                    alert('Modal has been closed.');
                }}>
                <View style={{margin: 10}}>
                <Text style={styles.headerText}>Product details: {data.product_name}</Text>
                <View style={styles.cardheader}>
                    <View style={styles.miniheader}>
                    <Image style={styles.thumbnail} source={{uri: data.thumbnail}} />
                    <Text style={styles.thumb_name}>{data.farmer_name}</Text>
                    </View>
                    <Text style={styles.timestamp}>{data.uploaded_time}</Text>
                </View>
                <View style={styles.cardbody}>
                    <Image style={styles.cardbody_image} source={{uri: data.product_image}}/>
                    <Text style={styles.p_name}>{data.product_name}</Text>
                    <Text style={styles.p_desc}>{data.product_description}</Text>
                <View>
                </View>
                </View>

                    <TouchableHighlight
                    onPress={() => {
                        this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text>Close</Text>
                    </TouchableHighlight>
                </View>
            </Modal>

        </View>
      );
    }

  }