React Native for loop TouchableOpacity scope JSX

  const result = [];    for (i = 0; i < 2 && i < ar.length; i++) {      result.push(          <>        <Countdown dateObj = {ar[i].time} />        <TouchableOpacity onPress={()=>{          console.log("SENDING DATA", ar[i]);          navigation.navigate("ChatInterface", {data: ar[i]});        }}>        </TouchableOpacity>        </>      );    }  ...  return <>{result}</>;  

I put everything inside a for loop so I can return them all at once later using `return <>{result}</>. However,

ar[i] is coming out as undefined. Even though the line above involving Countdown works fine. I'm thinking it has something to do with the scope of the anonymous function inside TouchableOpacity. How can I get this to work?

https://stackoverflow.com/questions/65535815/react-native-for-loop-touchableopacity-scope-jsx January 02, 2021 at 11:35AM