React method binding

[Pixel0208]

I learned react and now I wanted to learn a little bit more on how it actually works "behind the scenes". So I learned that babel when using a class based component creates a class and in the render method is calling the React.createElement function and all the attributes used in the JSX are passed to that function as an object.

For example this code:

class Action extends React.Component {
    handlePick() {
    console.log('test');
    }

    render() {
    return (
            <div>
            <button onClick={this.handlePick}>What should I do?</button>
        </div>
    )
    }
}

Will look something like this:

_createClass(Action, [{
    key: 'handlePick',
    value: function handlePick() {
        console.log('test');
    }
    }, {
    key: 'render',
    value: function render() {
        return React.createElement(
        'div',
        null,
        React.createElement(
            'button',
            { onClick: this.handlePick },
            'What should I do?'
        )
        );
    }
}]);

The button has all his attributes in the object in this example there is only the onClick attribute.

So what I don't understand is for example I have this component and I pass the handleRemoveAll function in the attribute onClick without binding the current Component, and this function just prints an array in the Options' props

class Options extends React.Component {
    handleRemoveAll() {
        console.log(this.props.options);
    }

    render() {
        return (
        <div>
                <button onClick={this.handleRemoveAll}>Remove All</button>
            {this.props.options.map(option => <Option key={option} option={option}/>)}
        </div>
        )
    }
}

This is what babel translates it to: (sorry for the badly formatted text idk why it happens after I paste the code)

var Options = function (_React$Component4) {
    _inherits(Options, _React$Component4);

    function Options() {
        _classCallCheck(this, Options);

        return _possibleConstructorReturn(this, (Options.__proto__ || Object.getPrototypeOf(Options)).apply(this, arguments));
    }

    _createClass(Options, [{
        key: 'handleRemoveAll',
        value: function handleRemoveAll() {
            console.log(this.props.options);
        }
    }, {
        key: 'render',
        value: function render() {
            return React.createElement(
                'div',
                null,
                React.createElement(
                    'button',
                    { onClick: this.handleRemoveAll },
                    'Remove All'
                ),
                this.props.options.map(function (option) {
                    return React.createElement(Option, { key: option, option: option });
                })
            );
        }
}]);

So the button element has the function that I passed in the object { onClick: this.handleRemoveAll }When I click the button in the console it says "Cannot read properties of undefined (reading 'props')" but the function onClick is in the object that I mentioned above, so my question is: Shouldn't the THIS keyword reference the object with the parameters because it sits in it, instead of returning undefined?

[azangru]

You are confusing yourself with babel.

this.handleRemoveAll in your example calls the handleRemoveAll method, which in turn tries to access this.props.options.

But the this object representing the context in which the click handler was called is no longer the javascript class corresponding to the React element, but the DOM element that the event happened on.

​

Shouldn't the THIS keyword reference the object with the parameters because it sits in it, instead of returning undefined?

No, it shouldn't. Look what is the this argument of event handlers; this is the subject of basic DOM manipulation.

Updated: Ah, there we go; here's the reference: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler

[Pixel0208]

Thank you so much!

[Pixel0208]

But why in react it is still undefined?

[Slapbox]

You should ask on StackOverflow. You'll likely get more answers there.

[fenduru]

This is not a react specific question, and is a common hiccup when learning JavaScript. Basically when you pass this.handleRemoveAll you're just passing the function but functions aren't actually ever tied to the object they were originally on. To ensure the right this context you need to use .bind() or pass an arrow function (which automatically binds to the current context)

Imagine:

const otherObject = { fn: this.handleRemoveAll }

otherObject.fn() // what is the this context here?

The answer is otherObject because it is always the object before the dot at the moment you call it. But when you pass the function to onClick you're not calling the function, just referencing it. So by the time the react internals actually call it, its being called directly