CODEWITHSUNDEEP
javascriptreactjs
asanas
asanas

Reputation: 4280

Nesting Functions in JS

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

Upvotes: 1

Views: 3505

Answers (4)

Kairxa
Kairxa

Reputation: 21

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.

Upvotes: 1

JohnIdol
JohnIdol

Reputation: 50097

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.

Upvotes: 2

ykaragol
ykaragol

Reputation: 6221

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.

Upvotes: 9

Jakub Rożek
Jakub Rożek

Reputation: 2130

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

Upvotes: 2

Related Questions