title: React Native: FlatList Opens Modal for all Items Instead of Selected Item
body: <p>I am using <a href="https://reactnative.dev/docs/flatlist" rel="nofollow noreferrer">React Native FlatList</a> and <a href="https://reactnative.dev/docs/modal" rel="nofollow noreferrer">React Native Modal</a>.</p>
  <blockquote>
  <p>Upon clicking on the item from the FlatList, I want to view 1 Modal only (containing the details of the item selected).</p>
  <p>However, if there are 4 items in the FlatList, selecting 1 item causes
  all 4 modals to pop up.</p>
  </blockquote>
  <p>Is there anyway I can display only 1 modal for 1 selected item in the FlatList instead of multiple modal?</p>
  <p><strong>Code Snippet below (some lines of code were removed as it's not needed):</strong></p>
  <pre><code>    constructor(props) {
              super(props);
              this.state = {
                  dataSource: [],
                  isLoading: true,
                  modalVisible: false,
              }
          }
      
      setModalVisible = (visible) =&gt; {
              this.setState({ modalVisible: visible });
          } 
          
      
          viewModal(item, price) {
              const { modalVisible } = this.state;
              return (
                  &lt;Modal
                      statusBarTranslucent={true}
                      animationType={&quot;slide&quot;}
                      transparent={true}
                      visible={modalVisible}
                      onRequestClose={() =&gt; {
                          Alert.alert(&quot;Modal has been closed.&quot;);
                      }}
                  &gt;
                      &lt;View&gt;
                          &lt;View&gt;
                              &lt;View&gt;
                                  &lt;Text&gt;
                                      Appointment Start Time:
                                  &lt;/Text&gt;
                                  &lt;Text&gt;
                                      {moment(item.time_start).format('h:mm a')}
                                  &lt;/Text&gt;
                              &lt;/View&gt;
      
                              &lt;View&gt;
                                  &lt;Text&gt;
                                      Appointment End Time:
                                  &lt;/Text&gt;
                                  &lt;Text&gt;
                                      {moment(item.end_start).format('h:mm a')}
                                  &lt;/Text&gt;
                              &lt;/View&gt;
      
                              
      
                              
                              &lt;View style={styles.row}&gt;
                                  &lt;Text&gt;
                                      Total:
                                  &lt;/Text&gt;
                                  &lt;Text&gt;
                                      {price}
                                  &lt;/Text&gt;
                              &lt;/View&gt;
                              
                              &lt;View&gt;
                                  &lt;View&gt;
                                      &lt;Button
                                          mode=&quot;outlined&quot;
                                          onPress={() =&gt; {
                                              this.setModalVisible(!modalVisible);
                                          }}
                                      &gt;
                                          {'Cancel'}
                                      &lt;/Button&gt;
                                  &lt;/View&gt;
                                  
                                  &lt;View&gt;
                                      &lt;Button
                                          mode=&quot;contained&quot;
                                          onPress={() =&gt; {
                                              this.setModalVisible(!modalVisible);
                                          }}
                                      &gt;
                                          {'Accept'}
                                      &lt;/Button&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/Modal&gt;
              );
          }
      
          viewFreelancerTime() {
              return (
                  &lt;View&gt;
                      &lt;FlatList
                          renderItem={({ item }) =&gt; {
                              let totalPrice = (parseFloat(item.service_price) + parseFloat(item.service_deposit)).toFixed(2);
                              return (
                                  &lt;Container&gt;
                                      {this.viewModal(item, totalPrice)}
                                      &lt;TouchableNativeFeedback
                                          onPress={() =&gt; {
                                              this.setModalVisible(true);
                                          }}
                                      &gt;
                                          &lt;View&gt;
                                              &lt;View&gt;
                                                  &lt;Text&gt;
                                                      {moment(item.time_start).format('h:mm a')}
                                                  &lt;/Text&gt;
                                              &lt;/View&gt;
      
                                              &lt;View&gt;
                                                  &lt;Text&gt;
                                                      {totalPrice}
                                                  &lt;/Text&gt;
                                              &lt;/View&gt;
                                          &lt;/View&gt;
                                      &lt;/TouchableNativeFeedback&gt;
                                  &lt;/Container&gt;
                              );
                          }}
                      /&gt;
                  &lt;/View&gt;
              );
          }
  
  render() {
              return (
                  &lt;&gt;
                      &lt;View style={{ flex: 1 }}&gt;
                          {this.viewFreelancerTime()}
                      &lt;/View&gt;
  
                  &lt;/&gt;
              );
      };
  </code></pre>