CODEWITHSUNDEEP
dynamicreactjsnative
nwilliams36
nwilliams36

Reputation: 201

React Native pass parameters through map function

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?

Upvotes: 10

Views: 12407

Answers (4)

Евгений Колтырин
Евгений Колтырин

Reputation: 1

This method is work: 1) Create function for creating elements with dynamic datas

createElement = (item) => {
    return(
        <TouchableHighlight onPress={()=>this.buttonPress({item})}>
            <Text style={ styles.plainText }> {item} </Text>
        </TouchableHighlight>
    )
};

2) Use this function into render function how in follow example:

render (
    elementsList = [];
    for (var i = 0; i < 10; i++){
        elementsList.push( this.createElement(i) );
    };

    return (
        <View>
            {elementsList}
        </View>
    )
);

It work, if you understand how use this.

Upvotes: -2

Anja Ishmukhametova
Anja Ishmukhametova

Reputation: 1564

the issue is happened because you are using function(item, key){ and you have to use arrow function 

let locations = this.state.campus.map((item, key) => { return <TouchableHighlight key={key}..

you have to do it for keep using 'this' context

Upvotes: 0

August
August

Reputation: 9

You should store this in another variable : let _this =this;

Then use _this instead of this

Upvotes: 0

Joe P
Joe P

Reputation: 444

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

Upvotes: 10

Related Questions