title: React Native for loop TouchableOpacity scope JSX
body: <pre><code>  const result = [];
    for (i = 0; i &lt; 2 &amp;&amp; i &lt; ar.length; i++) {
      result.push(  
        &lt;&gt;
        &lt;Countdown dateObj = {ar[i].time} /&gt;
        &lt;TouchableOpacity onPress={()=&gt;{
          console.log(&quot;SENDING DATA&quot;, ar[i]);
          navigation.navigate(&quot;ChatInterface&quot;, {data: ar[i]});
        }}&gt;
        &lt;/TouchableOpacity&gt;
        &lt;/&gt;
      );
    }
  ...
  return &lt;&gt;{result}&lt;/&gt;;
  </code></pre>
  <p>I put everything inside a for loop so I can return them all at once later using `return &lt;&gt;{result}&lt;/&gt;. However,</p>
  <p>ar[i] is coming out as undefined. Even though the line above involving <code>Countdown</code> 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?</p>