title: How to update the attribute of an item of a FlatList?
body: <p>I have programmed an Android app which is consists of a TextInput, a Button and a FlatList. With each name That is written in the TextInput, there will be an item in the flat list. The Item title will be the TextInput content and there will be two buttons and a text right beside the list item. A button is for increasing the number that Text displays by 1 and the other one is for decreasing. here is my code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
    View,
    Text,
    TextInput,
    FlatList,
    TouchableOpacity,
  
  } from 'react-native';
  import { ListItem, SearchBar} from 'react-native-elements';
  
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        task: "",
        task_array: [],
  
  
      };
    }
  
    ChangeText = (some_task) =&gt; {
      this.setState({task: some_task});
    };
    pushAdd = () =&gt; {
      let contact = {
        name: this.state.task,
        counter: 0,
      };
      this.setState({task_array: [...this.state.task_array, contact]});
    };
  
  
  
  
  
  
  
  
    renderListItem = ({item}) =&gt; {
     return(
       &lt;View style={{flexDirection: 'row'}}&gt;
       &lt;ListItem title={item.name} style={{width:'75%', marginLeft:20}}&gt;&lt;/ListItem&gt;
       &lt;View style={{flexDirection:'row'}}&gt;
           &lt;TouchableOpacity style={{ backgroundColor: 'blueviolet', height: 20, width: 20, borderRadius: 50}} onPress={()=&gt; item={name:item.name, counter:item.counter + 1}}&gt;&lt;Text&gt;+&lt;/Text&gt;&lt;/TouchableOpacity&gt;
           &lt;Text&gt;{item.counter}&lt;/Text&gt;
    //main problem       &lt;TouchableOpacity style={{ backgroundColor: 'blueviolet', height: 20, width: 20, borderRadius: 50 }} onPress={() =&gt; item = { name: item.name, counter: item.counter - 1 }}&gt;&lt;Text&gt;-&lt;/Text&gt;&lt;/TouchableOpacity&gt;
  
       &lt;/View&gt;
  
       &lt;/View&gt;
  
     );
    };
  
  
  render() {
    return(
      &lt;View style={{ backgroundColor: 'mediumturquoise', width:'100%', height:'100%'}}&gt;
      &lt;FlatList 
        data = {this.state.task_array}
        renderItem = {this.renderListItem}
        keyExtractor = {(item) =&gt; item.name}&gt;
      &lt;/FlatList&gt;
      &lt;View style = {{flexDirection : 'row', alignContent:'center', alignItems:'center'}}&gt;
          &lt;TextInput onChangeText={this.ChangeText} style={{ backgroundColor: 'burlywood', height:50, width:'75%', borderRadius:30, marginBottom:20, marginLeft:20, marginRight:20}}&gt;&lt;/TextInput&gt;
          &lt;TouchableOpacity style={{ backgroundColor: 'chocolate', height:40, width:50, borderRadius:10, marginBottom:20}} onPress={this.pushAdd}&gt;&lt;/TouchableOpacity&gt;
      &lt;/View&gt;
      &lt;/View&gt;
    );
    }
  };
  
  export default App;
  </code></pre>
  
  <p>I have pointed the problematic line with the comment 'main problem'. the increase and decrease button don't do their job and when I press them in the app, the number in the text remains unchanged. What change should I perform on the onPress method of my increase and decrease button to get them to work?</p>