Update state of only the clicked element

Question

So my code is :

export default class MyClass extends Component {

  constructor(props) {
    super(props);
    this.state = {
        data: [
          {id: 101, name:"One", thevalue:11},
          {id: 102, name:"Two", thevalue:22},
          {id: 103, name:"three", thevalue:33}
        ]
    }
  }

  handleOnPress() {
    << HOW DO I CODE THIS ?? >>
    I want to increase the number count in thevalue of the pressed item
  }

  render() {
      return(
        <FlatList
            data = {this.state.data}
            renderItem = {
                ({item}) => 
                <TouchableOpacity onPress={this.handleOnPress} >
                    <Text> {item.name} + {item.thevalue} </Text>
                </TouchableOpacity>
            }
        />
    )
  }
}

I want to be able to increase the count of the thevalue of only the item clicked. So I should do a setState right? But how do I know for which item I need to run that on? Do I need to pass the id of the item clicked to the function? If yes, how do I do that?

Many thanks.

UPDATE1:

handleOnPress(id) {
      this.setState({
        thevalue: this.state.thevalue+1
    });
}

Can you provide `item` in the `onPress`? For instance: `{this.handleOnPress(item)}` or similar? — Jeff Huijsmans, Aug 16 '17 at 15:03
@JeffHuijsmans you can't call it like that or handleOnPress will be called on render of every item. You need to do something as per my answer :) — Matt Derrick, Aug 16 '17 at 15:07
@MattDerrick nice, thanks! I was thinking in the way of another framework :) — Jeff Huijsmans, Aug 16 '17 at 15:08
https://stackoverflow.com/questions/27397266/onclick-event-binding-in-react-js — Matt Derrick, Aug 16 '17 at 15:48
Why not create an item component and handle on press in it? In MyClass just render the list. — parohy, Aug 17 '17 at 07:19

Matt Derrick · Accepted Answer · 2017-08-16T15:47:35.757

3

You have to give it an argument so we know what item is to increment:

onPress={this.handleOnPress.bind(this, item.id)}
...
handleOnPress(id) {
    // increment id
}

or this is a little bit more readable but doing the same thing:

onPress={() => this.handleOnPress(item.id)}

edited Aug 16 '17 at 15:47

answered Aug 16 '17 at 15:03

Matt Derrick

5,674
2
36
52

I have my function: `this.setState({thevalue: this.state.thevalue+1});` but not working. – Somename Aug 16 '17 at 15:19
You are literally updating with "thevalue"? You need to update 'data[X].thevalue' where X is position of the object with the same ID. – Matt Derrick Aug 17 '17 at 09:06
I did that. Followed https://stackoverflow.com/questions/45717081/update-state-of-only-the-clicked-element/45717227#45717227 but it's not updating the data real time. I have to save something in the page and Hot Reloading will do the trick. I want the data to be updated realtime. – Somename Aug 17 '17 at 14:42

An Nguyen · Answer 2 · 2017-08-16T17:38:28.443

1

You can pass the id to onPress then update the corresponding thevalue

export default class MyClass extends Component {

  constructor(props) {
    super(props);
    this.state = {
        data: [
          {id: 101, name:"One", thevalue:11},
          {id: 102, name:"Two", thevalue:22},
          {id: 103, name:"three", thevalue:33}
        ]
    }
  }

  handleOnPress(id) {
    let {data} = this.state;
    let idx = data.findIndex(x => x.id == id);
    data[idx].thevalue ++;
    this.setState({data});
  }

  render() {
      return(
        <FlatList
            data = {this.state.data}
            renderItem = {
                ({item}) => 
                <TouchableOpacity onPress={() => this.handleOnPress(item.id)} >
                    <Text> {item.name} + {item.thevalue} </Text>
                </TouchableOpacity>
            }
        />
    )
  }
}

edited Aug 16 '17 at 17:38

answered Aug 16 '17 at 15:09

An Nguyen

1,487
10
21

I received `undefined is not an object (evaluating 'data[idx].thevalue')` I followed your code – Somename Aug 16 '17 at 15:17
`onPress={(item) => this.handleOnPress(item.id)}` Have you changed the `onPress` function ? – An Nguyen Aug 16 '17 at 15:22
No. Exactly same as here. Giving same error for idx – Somename Aug 16 '17 at 15:46
Could you log out `idx` and `data` to see which one is `null` ? – An Nguyen Aug 16 '17 at 17:23
`console.log(idx)` returned `1` for any of the item clicked – Somename Aug 16 '17 at 17:34
how about `console.log(id)` ? – An Nguyen Aug 16 '17 at 17:34
It returned `undefined` – Somename Aug 16 '17 at 17:35
My bad. Please change to `onPress={() => this.handleOnPress(item.id)}` – An Nguyen Aug 16 '17 at 17:38
that seems to be giving proper number of the element in the array, but it doesn't update the value of the `thevalue`. Still returning the same number that was before. – Somename Aug 16 '17 at 17:43
It is actually working but not in real time. When i do some change in the index.android file and save it (I have Hot Reloading enabled), only then its displayed. Otherwise the original value is displayed. – Somename Aug 16 '17 at 17:52

Update state of only the clicked element

2 Answers2