Given the following javascript, in order to pass the updateSelectedPages method from the parent react component to the Image component inside of the .map() function, I first have to assign it to a variable and then use that variable inside the function. Is there some way to bind this inside the function to be the parent react component so I don't have to use a temporary variable?

var pageNumber = 0;
var updateSelectedPages = this.updateSelectedPages;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});

Given the following javascript, in order to pass the updateSelectedPages method from the parent react component to the Image component inside of the .map() function, I first have to assign it to a variable and then use that variable inside the function. Is there some way to bind this inside the function to be the parent react component so I don't have to use a temporary variable?

var pageNumber = 0;
var updateSelectedPages = this.updateSelectedPages;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});

• javascript
• dictionary
• reactjs

• 1 Or you could just declare a top level variable self and set it to this and access it within the function :) – Dhruva Sagar Commented Nov 20, 2014 at 17:55
• @DhruvaSagar i'm not sure it's gonna work 100%. Look at answers for better alternatives. – Maxim Veksler Commented Apr 25, 2016 at 13:36

2 Answers 2

Array.prototype.map take second argument that set the context for the callback function. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

So the following should be enough, if I understood you question correctly :)

var pageNumber = 0;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={this.updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}, this).reduce(function(a, b) {
  return a.concat(b);
});

Edit 2+ years later: Nowadays you can most likely utilize arrow functions in your code (either by native support if only targeting the latest browser or via build-tools like babel), and other than being shorter to write they also have lexical scoping for this which removes the need for binding or passing the second arg to array.map()

let pageNumber = 0;
const images = this.props.resources.map(resource => { // <-- using arrow function removes the need to worry about `this`
  const arr = [];
  for(let x = 0; x < resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image
        src={`import/previewImage/${resource.encodedName}?page=${pageNumber}`}
        number={pageNumber}
        updateSelectedPages={this.updateSelectedPages}
        key={pageNumber}
      />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});

You can bind this as follows:

var pageNumber = 0;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={this.updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}.bind(this)).reduce(function(a, b) {
  return a.concat(b);
});