Javascript `this` - reference containing object

Question

I am using Javascript and React to build a front end. I am not sure how to reference a method of the containing object:

     var RAttribute = React.createClass({

        loadAssignmentsForList: function(elem) {
                //other code
            },

            render: function() {
                    var assignmentsLoading = this.props.assignmentsLoading;
                    var lists = this.props.data.lists.map(function(elem) {
                       return (<li className='list-group-item grey'>
                         <div className='list-group'>
                           <RList key = {elem.name} data={elem}
                              assignmentsLoading={assignmentsLoading}
                              loadAssignmentsForList={this.loadAssignmentsForList(elem)}/>
                       </div>
                      </li>);
                    });
                    //other code
          }
       //other code
     });

I am trying to call loadAssignmentsForList from within render so I am using this.loadAssignmentsForList(elem). However, I get the following error.

Uncaught TypeError: Cannot read property 'loadAssignmentsForList' of undefined

Are you transpiling ES6? If so you could use arrow functions. It really depends on your setup — , Oct 28 '15 at 14:30
That should work from the code you provided, must be something we can't see there — Dominic, Oct 28 '15 at 14:31
Though it's my understanding that React should auto bind `this` in the `render` method — , Oct 28 '15 at 14:31
Your code works https://jsfiddle.net/69z2wepo/19357/ could you provide more code — Oleksandr T., Oct 28 '15 at 14:32
I provided more of the code. The error actually appears within a `map` method. — bsky, Oct 28 '15 at 14:34
@Alexander Nice, now I know how to `React` on jsfiddle, but your example is not exactly the same — Ruan Mendes, Oct 28 '15 at 14:36

Oleksandr T. · Accepted Answer · 2015-10-28T15:04:13.253

Bind .this to .map, this in .map does not refer to RAttribute object

var lists = this.props.data.lists.map(function(elem) {
   // your code             
}.bind(this));

or you can set this to .map through second argument, like this

var lists = this.props.data.lists.map(function(elem) {
   // your code             
}, this);

also, if you are using ES6 you can use arrow functions

var lists = this.props.data.lists.map((elem) => {
   // your code             
});

Javascript `this` - reference containing object

1 Answers1