Nesting Functions in JS

Question

I am trying to understand some concepts in reactjs, but I\'m unable to understand nesting of functions. I created the below example for investigating my concern.

In

Answer 1

this is not defined in that function's context:

function(point){
  return (
    <div key={point}>{this.renderInnerContent()}</div>
  )
}

Because it is a new function. You have different options to pass this to that function:

1- Fat arrow function:

renderContent() {
   let data = ["a","b","c"];
   const displaydata = data.map((point) => {
      return (
        <div key={point}>{this.renderInnerContent()}</div>
       )
   });
   return (
      <div>{displaydata}</div>
   )
}

2- Define a variable:

renderContent() {
   let data = ["a","b","c"];
   let _this = this;
   const displaydata = data.map(function(point){
      return (
        <div key={point}>{_this.renderInnerContent()}</div>
       )
   });
   return (
      <div>{displaydata}</div>
   )
}

3- Use bind:

renderContent() {
   let data = ["a","b","c"];
   const displaydata = data.map(function(point){
      return (
        <div key={point}>{this.renderInnerContent()}</div>
       )
   }.bind(this));
   return (
      <div>{displaydata}</div>
   )
}

PS: Not sure any of these is not working in React.

Answer 2

The main issue here is that you are passing a function to data.map and in that scope 'this' is not your outer scope (ChartsArea) but it refers by the default to the global object (window) because it's an anonymous function.

So to make it work you could do this:

var that = this; 

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    });

Or pass your context in the second argument of .map:

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    }, this);

Or use bind:

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    }.bind(this));

Or use arrow functions as somebody else pointed out.

Answer 3

The context changes inside the map function, therefore "this" points to something else. If you want to have the "proper" this you could use an arrow function, which has lexical "this".

const displaydata = data.map(point => {
  return (
    <div key={point}>{this.renderInnerContent()}</div>
  )
});

Answer 4

The shortest one that I use is this:
<div>{this.renderContent.bind(this).call()}</div>.

Sometimes they get a bit ugly from my standpoints but it's the shortest one.