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?

Solution

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)}

Comments

[nwilliams36]

You are probably correct, however this does not solve the issue, it just creates more errors. I now think my whole design is wrong so I will go back to the drawing board and work out how to do this a different way. I think I need to create these buttons in a ListView.

[Enamul Hassan]

Welcome to Stack Overflow! This is really a comment, not an answer. With a bit more rep, you will be able to post comments.

[Sunny Patel]

Could you provide an example of where to create this variable?

[hippietrail]

You should always avoid using either bind or arrow functions inside JSX/inside the render function because they create a new function every time which causes every item in the list/array/map to be re-rendered when a single one is pressed unless you also provide a custom comparison function in shouldComponentUpdate that skips comparing the buttonPress field.

[hippietrail]

stackoverflow.com/questions/36677733/…