React rendering recursion stops without error

Question

I've encountered a problem with rendering some elements in React. (I use ImmutableJS)

renderComponents: function(components) {
    if(components.isEmpty()) return [];

    var table = [];

    components.map(function(component) {
      table.push(<ComponentTableElement key={ component.get('id') } data={ component } />);

      if(component.has('children')) {
        var children = component.get('children');
        table.concat(this.renderComponents(children));
      }
    });

    return table;
  },

As I looked for error, I found that this.renderComponents(children) doesn't return anything at all and the code somehow stops.

I mean before that line everything works ok, but then after this line, when i try to console.log something, it doesn't show up. And it doesn't even reach return table.

So what is wrong with that code?

Alexandre Kirszenberg · Accepted Answer · 2015-04-23 15:59:38Z

In the context of the function you pass to map, this refers to the window object, not to the current component instance, so this.renderComponents is undefined when you try to call it.

components.map(function(component) {
  this === window;
});

You can pass a value to use as this in the body of your function as the second parameter of Array::map.

components.map(function(component) {
  table.push(<ComponentTableElement key={ component.get('id') } data={ component } />);

  if(component.has('children')) {
    var children = component.get('children');
    // here, `this` refers to the component instance
    table.concat(this.renderComponents(children));
  }
}, this);

If you're using ES6, you can also use fat-arrow functions, which are automatically bound to this.

components.map((component) => {
  table.push(<ComponentTableElement key={ component.get('id') } data={ component } />);

  if(component.has('children')) {
    var children = component.get('children');
    // here, `this` refers to the component instance
    table.concat(this.renderComponents(children));
  }
});

Collectives™ on Stack Overflow

React rendering recursion stops without error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related