How to Create a map of components in React native

Question

I want to create a scrollbar with images, to which links are in an array LINKS. This is done in a class.

If I make just one image with uri:"http://something.jpg" it works perfectly, but here there is a "undefined is not an object" error on line where I add navigator to ImageButton.

(I tried both giving the button navigator or straight onPress function but neither of them work).

    {
         LINKS.map(function(val){
                return <ImageButton 
                uri={val}
                navigator={this.props.navigator}
                onPress={() => {
                        console.log(this.props.uri);
                        this.props.navigator.push({
                            id:'image',
                            uri:this.props.uri,
                            sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                        });
                 }}
            />
          })
    }

Maybe there is just something I don't understand about array.map() thing.

Answer 1

Bind the scope of this inside your map function:

LINKS.map(function(val){

}.bind(this));

More information on bind :

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Incidentally, if you'd used a fat arrow here like you do for your onPress callback, you'd have avoided this issue since the scope of this is automatically set.