onPress doesn't detect props of touchable opacity in react native

Question

onPress doesn't show me the id of my touchable opacity component when I press on it. He just shows me undefined.

    render() {
            var rows = [];
            var i = 0;
            while(i<5){
              rows.push(<TouchableOpacity id={i} activeOpacity={0.9} onPress={() => alert(this.props.id)}>
                  <View>
    </View>
                </TouchableOpacity>);
              i++;
            }
        return {rows}
}

I want to when I press on it, it shows the id of touchable opacity. Please help me

Answer 1

The component you have for this render() function would need to have a prop id for this to show an alert, but I think you are wanting to show each value of i . Due to i never going out of scope within this function (as it is var ), if you attempted to just do alert(i) it would show 5 for each button, but if you use const inside the while to store the current value of i , each button will have the correct value:

while (i < 5) {
  const temp = i;

  rows.push(
    <TouchableOpacity
      id={i}
      activeOpacity={0.9}
      onPress={() => alert(temp)}
    >
      <View />
    </TouchableOpacity>,
  );

  i++;
}

You can't use a prop you are assigning in another prop you are assigning like you were trying to do.