React Native: Flatlist Onpress function disables all TouchableHighlight fields instead of just the one which was pressed

Question

This is my first question in Stackoverflow and I am not a professional developer, so be kind guys :) If any additional information is needed, just let me know.

So, I am trying to create a flatlist for a delivery man showing his daily itinerary. In this example he has 4 address to go to. When he arrives at the first place, in this case "METAL", he should press the yellow button. Pressing the yellow button should disable it and chage its background color, but just for the first place "METAL".

Right now, when i press the yellow button it disables and changes the background color for all buttons in the flatlist, I am not sure how to target just the one button that was clicked.

I attached some pictures to show whats going on. The last picture is just an example of what I want.

https://imgur.com/a/G1S0ap4

This's what the code first loads

This is what happens when i press the yellow button. All buttons have been disabled

This is what i wanted it to do, disable just the button that i actually clicked on

        this.state = {disablearrived: false,
        disablesuccess: false,
        disablenotdelivered: false,
        showView: true,
        fadeAnim: new Animated.Value(0),
        colorarrived: '#E5C454',
        colorsuccess: '#52D273',
        colornotdelivered: '#E94F64',
        data: [
          { id: "1", custid: "1111111111111", name: "METAL",  nf: "166951" },
          { id: "2", custid: "222222222222", name: "BRUNO", nf: "166952" },
          { id: "3", custid: "8248632473", name: "Doc Hudson" },
          { id: "4", custid: "8577673", name: "Cruz Ramirez" },

        ],
      };



    onPressButtonarrived(item) {
      //  Alert.alert('Chegada às: '+new Date().toLocaleTimeString('pt-BR', {timeZone: 'America/Sao_Paulo'}))
        this.setState({ disablearrived: true })
        this.setState({ colorarrived: '#D6D6D6' })
      }

    render() {
    return (
      <View style={{ backgroundColor: '#252525'}}>
      <View>
        <Text style={styles.normalblue}>Bem vindo, Victor</Text>
        <Text style={styles.normalblue}>Estas são suas entregas de dia</Text>
        </View>
        <FlatList
          data={this.state.data}
          extraData={this.state}
          keyExtractor={item => item.id}
          renderItem={({ item }) => {
            return (
              <View style={{backgroundColor: '#484848', borderBottomColor: '#252525', borderBottomWidth: 20}}>
                <Text style={styles.bigyellow}>{item.name}</Text>
                <Text style={styles.smallblue}>{item.add}, {item.addnumber}</Text>
        <Text style={styles.normalyellow}>NF {item.nf}</Text>
        <View style={styles.containercontent}>
        <View style={{backgroundColor: this.state.colorarrived, justifyContent: 'center', flex: 1}}>
        <TouchableHighlight style={styles.buttonview}
        onPress={() => {this.onPressButtonarrived(item)}} disabled={this.state.disablearrived}>
      <View style={styles.btnIcon}>
      <Icon name="location" size={30} />
        <Text>Chegada</Text>
      </View>
    </TouchableHighlight>
</View>
        <View style={{backgroundColor: this.state.colorsuccess, justifyContent: 'center', flex: 1}}>
        <TouchableHighlight style={styles.buttonview}
        onPress={() => {this.onPressButtonsuccess(item)}} disabled={this.state.disablesuccess}>
      <View style={styles.btnIcon}>
      <Icon name="check" size={30} />
        <Text>Entregue</Text>
      </View>
    </TouchableHighlight>
</View>
{this.state.showView && (
        <View style={{backgroundColor: this.state.colornotdelivered, justifyContent: 'center', flex: 1}}>
        <TouchableHighlight style={styles.buttonview}
        onPress={() => {this.onPressButtonnotdelivered(item)}} disabled={this.state.disablenotdelivered}>
      <View style={styles.btnIcon}>
      <Icon name="block" size={30} />
        <Text>Não Entregue</Text>
      </View>
    </TouchableHighlight>
</View>
)}
              </View>
              </View>
            );
          }}
        />
      </View>
    );
  }

Answer 1

since you display all the button in one flatlist, they share the same state, thus why all the other buttons become disabled when you clicked on one.

You will have to separate the buttons and give them a separate state, so they will change individually

Answer 2

I just found out that I need to assign ids to the state in order to change the color of the button that I pressed.

    onPressButtonarrived(item) {
        this.setState({ disablearrived: item.id })
        this.setState({ colorarrived: item.id })
      }


<View style={[styles.button, {backgroundColor: item.id === this.state.colorarrived ? '#D6D6D6' : '#E5C454'}]}>
        <TouchableOpacity style={styles.buttonview}
        onPress={() => {this.onPressButtonarrived(item)}} disabled={item.id === this.state.disablearrived ? true : false}>
      <View style={styles.btnIcon}>
      <Icon name="location" size={30} />
        <Text>Chegada</Text>
      </View>
    </TouchableOpacity>
</View>