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 the below example, I'm rendering some content the value of which is coming from a series of nested functions. However, I get the error "Uncaught TypeError: Cannot read property 'renderInnerContent' of undefined". Can you please help me understand what's happening and how to resolve this problem? My primary motive is to understand how to abstract things into different functions.

import React, { Component } from 'react';

export default class MyComponent extends Component {
  renderInnerContent() {
    return (
      <div>Innercontent</div>
    )
  }

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

  render() {
    return (
      <div>{this.renderContent()}</div>
    )
  }
}

ykaragol · Accepted Answer · 2016-05-08 08:26:55Z

9

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.

answered May 8, 2016 at 8:26

ykaragol

6,2413 gold badges32 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

asanas Over a year ago

Thank you so much. I used the fat arrow function and it worked great. More importantly, I understood the concept.

Jakub Rożek · Accepted Answer · 2016-05-08 08:18:02Z

2

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

answered May 8, 2016 at 8:18

Jakub Rożek

2,13013 silver badges12 bronze badges

Comments

JohnIdol · Accepted Answer · 2016-05-08 08:28:44Z

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.

Kairxa · Accepted Answer · 2016-05-08 10:16:17Z

1

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.

answered May 8, 2016 at 10:16

Kairxa

212 bronze badges

Collectives™ on Stack Overflow

Nesting Functions in JS

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related