React Native : set id to a component and get this component's id

Question

I am developing my first React Native app and I am trying to set an id to a component so that I can determine this view when pressing on it and displaying data according to the component's id

This is what I tried so far:

 renderRow(rowData, sectionID, rowID){
  var past_matches_circles =[];
  for(var i=0; i<isPast; i++){
    past_matches_circles.push(
      <TouchableOpacity id={i} key = {i} collapsable={false} style={styles.small_circle} onPress={()=>this.pressOnCircle(rowData[`${i}`].MatchID)}>
      </TouchableOpacity>
    );
  } 
  return (
    <View>
      <View style={{flexDirection:'row'}}>
        {past_matches_circles}
      </View>
      <View style={{flexDirection:'row'}}>
        <Image style={{width:100, height:100, margin:5}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
        <View style={{justifyContent:'center', flex:1}}>
          <Text> {rowData[0].MatchDate} </Text>
          <Text> {rowData[0].HomeTeam} VS {rowData[0].AwayTeam} </Text>
        </View>
      </View>
    </View>
  );
}
pressOnCircle(i){
  ToastAndroid.show('key ' + i, ToastAndroid.SHORT);
}

but unfortunately the iterator i value is always equal to its last value inside the loop regardless which view I am pressing on.

Can anyone help me getting component's id?

Answer 1

After several days, finally I solved this problem. And I'll post it for who will come to this question.

I was pushing the views into my array without returning so the value of i is always the same.

so that what I did:

renderCircle(id) {
  return <TouchableOpacity key={id} style={styles.small_circle} onPress={() => this.pressOnCircle(id)}>
         </TouchableOpacity>;
}
renderRow(rowData, sectionID, rowID){
  var past_matches_circles =[];
  for(var i=0; i<isPast; i++){
    past_matches_circles.push(
      this.renderCircle(i)
    );
  }
  var { page, animationsAreEnabled } = this.state;
  return (
    <View>
      <View style={{flexDirection:'row'}}>
        {past_matches_circles}
      </View>
      <View style={{flexDirection:'row'}}>
        <Image style={{width:100, height:100, margin:5}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
        <View style={{justifyContent:'center', flex:1}}>
          <Text> {rowData[0].MatchDate} </Text>
          <Text> {rowData[0].HomeTeam} VS {rowData[0].AwayTeam} </Text>
        </View>
      </View>
    </View>
  );
}

Hope that will help.

Answer 2

You can use .bind to create a new function that closes over the value of i. This isn't the best for performance as you're creating a new function each time.

onPress={ this.pressOnCircle.bind(this, i) }>

Also, you might need to do something like

this.pressOnCircle = this.pressOnCircle.bind(this);

In the constructor to get the proper this context in the handler.