React Native pass parameters through map function

Question

I am just learning React Native and I want to create a series of buttons using dynamic data. My current code is:

var locations = this.state.campus.map(function(item, key){
            return(
                <TouchableHighlight key={key}
                style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress({item})} >
               <Text style={
                   styles.plainText}>{item}</Text>
            </TouchableHighlight>
           )

My issue is with the lines

style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]}

and

onPress={()=>this.buttonPress({item})}

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.

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.

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.

Is there a way to handle dynamic data like this in React Native?

Answer 1

In both cases you are unnecessarily wrapping item in {}. For both of these lines, the expressions inside the outer {} are pure javascript (an array and a function) and should follow javascript syntax.

So the lines should read as follows:

style={[styles.button, (this.state.location===item && styles.buttonPressed)]}

and

onPress={()=>this.buttonPress(item)}