title: React Native pass parameters through map function
body: <p>I am just learning React Native and I want to create a series of buttons using dynamic data.  My current code is:</p>
  
  <pre><code>var locations = this.state.campus.map(function(item, key){
              return(
                  &lt;TouchableHighlight key={key}
                  style={[styles.button, (this.state.location==={item} &amp;&amp; styles.buttonPressed)]}
                  underlayColor='#dddddd'
                  onPress={()=&gt;this.buttonPress({item})} &gt;
                 &lt;Text style={
                     styles.plainText}&gt;{item}&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
             )
  </code></pre>
  
  <p>My issue is with the lines</p>
  
  <pre><code>style={[styles.button, (this.state.location==={item} &amp;&amp; styles.buttonPressed)]}
  </code></pre>
  
  <p>and </p>
  
  <pre><code>onPress={()=&gt;this.buttonPress({item})}
  </code></pre>
  
  <p>I am trying generate these lines using the data dynamically off the map function.  These lines of code work perfectly if I use static data (ie generate each button separately), but fail using dynamic data.  The code does produce a display so the issue is not with rendering, the issue is with the functionality.</p>
  
  <p>With the button press I get the error message undefined in not an object while the style simply causes the whole display not to render.</p>
  
  <p>It is obvious that the dynamic data ({item}) works inside the Text element but not when passed to the other two elements as data. I have tried using {{item}} but this throws a syntax error.</p>
  
  <p>Is there a way to handle dynamic data like this in React Native?</p>