title: How to select only one item from a flatlist in React and change it's style?
body: <p>I'm stuck with trying to make a flatlist work with one selection and change only it's background. I already got the id from the pressed item and I'm passing the information to another page. But after clicking, it's style is not changing. I need to select just one and if I click on another it should deselect the first one and keep the new one selected.</p>
  
  <p>My code is as folows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { StyleSheet, Text, View, Image, TouchableOpacity, FlatList, Linking, ActivityIndicator } from 'react-native';
  import { Searchbar } from 'react-native-paper';
  
  export default class Merchants extends Component {
      constructor() {
          super()
          this.state = {
              search: '',
              loading: false,
              merchantObj: [],
              btnDisabled: true,
              itemId: null,
              imgLink: null,
              listClicked: false,
          }
          this.arrayholder = [];
      }
      componentDidMount() {
          const merchantUrl = 'http://165.227.43.115:8080/merchant/merchant'
          fetch(merchantUrl)
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  this.setState({ merchantObj: data, loading: false },
                      function () {
                          this.arrayholder = data;
                      })
              })
              .catch(error =&gt; {
                  console.log(error)
              });
      }
  
      search = text =&gt; {
          console.log(text);
      };
      clear = () =&gt; {
          this.search.clear();
      };
      SearchFilterFunction(text) {
          //passing the inserted text in textinput
          const newData = this.arrayholder.filter(function (item) {
              //applying filter for the inserted text in search bar
              const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
              const textData = text.toUpperCase();
              return itemData.indexOf(textData) &gt; -1;
          });
          this.setState({
              //setting the filtered newData on datasource
              //After setting the data it will automatically re-render the view
              merchantObj: newData,
              search: text,
          });
      }
      FlatListItemSeparator = () =&gt; {
          return (
              &lt;View
                  style={{
                      height: 1,
                      width: "95%",
                      justifyContent: 'center',
                      backgroundColor: "#DCDCDC",
                  }}
              /&gt;
          );
      }
      MerchSelected = (selectedId) =&gt; {
          if (this.state.btnDisabled === true) {
              return (
                  &lt;View style={styles.btnDsb}&gt;
                      &lt;Text style={styles.txtBtn}&gt;Select&lt;/Text&gt;
                  &lt;/View&gt;
              )
          } else {
              return (
                  &lt;TouchableOpacity onPress={(item) =&gt; this.props.navigation.navigate('Main', { itemId: this.state.itemId, itemImg: this.state.imgLink })}&gt;
                      &lt;View style={styles.btnSelect}&gt;
                          &lt;Text style={styles.txtBtn}&gt;Select&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/TouchableOpacity&gt;
              )
          }
      }
  
      PressedItem = (itemId, itemImg) =&gt; {
          console.log(itemId)
          this.setState({ itemId: itemId, btnDisabled: false, imgLink: itemImg })
      }
  
      renderItem = ({ item }) =&gt; {
          return (
              &lt;TouchableOpacity onPress={() =&gt; this.PressedItem(item.id, item.image)} &gt;
                  &lt;View style={styles.listItem} &gt;
                      &lt;Image
                          style={{ width: 80, height: 80 }}
                          source={{ uri: `${item.image}` }} /&gt;
                      &lt;View style={{ flexDirection: 'column', marginLeft: 2 }}&gt;
                          &lt; Text style={{ fontWeight: 'bold', fontSize: 20 }} &gt; {item.name} &lt;/Text&gt;
                          {item.shoppingOption == 'STORE' ? &lt;Text&gt;Store&lt;/Text&gt; : &lt;Text&gt;In-Store  &amp;amp; Online&lt;/Text&gt;}
                          &lt;Text&gt;${item.minAmount} - ${item.maxAmount}&lt;/Text&gt;
                          &lt;Text style={{ color: '#00CED1' }}
                              onPress={() =&gt; Linking.openURL(`${item.website}`)}&gt;
                              view website
                      &lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
          )
      }
      render() {
          if (this.state.loading) {
              return (
                  &lt;View&gt;
                      &lt;Text&gt;Loading...&lt;/Text&gt;
                  &lt;/View&gt;
              );
          }
  
          return (
              &lt;View style={styles.container} &gt;
                  &lt;View style={styles.searchBar}&gt;
                      &lt;Searchbar
                          round
                          placeholder="Search"
                          onChangeText={text =&gt; this.SearchFilterFunction(text)}
                          onClear={text =&gt; this.SearchFilterFunction('')}
                          value={this.state.search}
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.merchantsList}&gt;
                      &lt;FlatList
                          data={this.state.merchantObj}
                          renderItem={this.renderItem}
                          ItemSeparatorComponent={this.FlatListItemSeparator}
                          keyExtractor={item =&gt; item.id.toString()}
                          extraData={this.state}
                      &gt;
                      &lt;/FlatList&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.footerBtn}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate('Main', { itemId: undefined })}&gt;
                          &lt;View style={styles.btnSelect}&gt;
                              &lt;Text style={styles.txtBtn}&gt;Cancel&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
                      {this.state.btnDisabled === true ? this.MerchSelected('Sim') : this.MerchSelected('Nao')}
                  &lt;/View&gt;
              &lt;/View &gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#f2f2f4',
          alignItems: 'center',
      },
      searchBar: {
          flex: 1,
          top: '5%',
          width: '90%',
          backgroundColor: 'rgba(242, 242, 244,0.5)'
      },
      merchantsList: {
          flex: 6,
          width: '95%',
      },
      footerBtn: {
          flex: 1,
          width: '100%',
      },
      listItem: {
          flexDirection: 'row',
          marginTop: 5,
      },
      notSelected: {
          backgroundColor: '#f2f2f4'
      },
      listItemSlc: {
          backgroundColor: '#48D1CC',
      },
      btnSelect: {
          justifyContent: 'center',
          width: '95%',
          borderRadius: 5,
          borderColor: '#00CED1',
          borderStyle: 'solid',
          borderWidth: 2,
          height: 40,
          marginTop: 5,
          marginLeft: 8,
      },
      btnDsb: {
          justifyContent: 'center',
          width: '95%',
          borderRadius: 5,
          backgroundColor: 'gray',
          height: 40,
          marginTop: 5,
          marginLeft: 8,
      },
      txtBtn: {
          textAlign: 'center',
          color: '#00CED1',
          fontSize: 20,
      },
  })</code></pre>
  </div>
  </div>
  </p>