Scoping 'this' within a reactjs component

Question

While building my first reactjs component, I got the familiar "undefined is not a function" when trying to use a helper (makeWorkSiteUrl) because the this scope had changed away from being that of the component.

Of course, I just did what most JS developers would do and declared that=this before I made my function call to solve the problem.

However, it occurred to me that this is probably a common problem. So there might be a 'better' or 'react' way of achieving the same thing. Or, it may be an indication of poor design of this component. Is there a style or method that is preferred or available instead of that=this to access a components internal functions/properties?

"Undefined is not a function":

var WorkSiteQuickList = React.createClass({
    propTypes: {
        data: React.PropTypes.object.isRequired     
    },
    render() {
        var workSiteNodes = this.props.data.work_sites.map(function (worksite) {
            var linkUrl = this.makeWorkSiteUrl(worksite.id) //Fail  
            return (
                <WorkSiteQuickListItem workSiteName={worksite.name} linkUrl={linkUrl} />
            );
        });
        return (
                <div>    
                    {workSiteNodes}             
               </div>
        );
    },
    makeWorkSiteUrl(workSiteId) {
        return "/worksite/"+ workSiteId;
    }   
});

Works as expected:

var WorkSiteQuickList = React.createClass({
    propTypes: {
        data: React.PropTypes.object.isRequired     
    },
    render() {
        that = this;
        var workSiteNodes = this.props.data.work_sites.map(function (worksite) {
            var linkUrl = that.makeWorkSiteUrl(worksite.id) //OK  
            return (
                <WorkSiteQuickListItem workSiteName={worksite.name} linkUrl={linkUrl} />
            );
        });
        return (
                <div>    
                    {workSiteNodes}             
               </div>
        );
    },
    makeWorkSiteUrl(workSiteId) {
        return "/worksite/"+ workSiteId;
    }   
});

I'm sure this question will be closed, but I'd rather ask it than miss a critical part of the "framework".

Gil Birman · Accepted Answer · 2015-03-20 18:38:19Z

3

Here are some common patterns to deal with this scoping:

Utilizing an es6 transpiler (like the JSX transformer that you're currently using, or babeljs which happens to support JSX), use arrow functions which are scoped to the outer context (aka lexical scoping).
```
 this.props.data.work_sites.map( (worksite) => { .... return ... } )
```
Pass in this as the second argument of Array#map
Chain bind onto the function you pass into Array#map
```
function() {}.bind(this)
```

Update: I've had a lot of trouble lately with =>, this resolving to window when paused at a breakpoint in the chrome dev tools within the render() method. Originally I thought it was a babeljs bug. However, turns out it's actually a failure of the dev tools ability to understand that source maps actually replace this with _this.

edited Mar 20, 2015 at 18:38

answered Mar 12, 2015 at 0:33

Gil Birman

36k15 gold badges79 silver badges124 bronze badges

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

3 Comments

Ray Suelzer Over a year ago

Awesome! Great, great answer. I love the es6 arrow functions thing. That is super useful.

Ray Suelzer Over a year ago

I used the arrow function to great effect here. I'm glad I asked this question because it is clearly the ideal way to handle these situations in JSX (and es6).

Gil Birman Over a year ago

I agree it's the best way. I re-arranged the list so it appears 1st.

Collectives™ on Stack Overflow

Scoping 'this' within a reactjs component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related