react: Strange second argument passed to event handler (always undefined)

I’ve found a bug.

I’ve attached event listener with onClick property like this:

<a href="#" onClick={function (event) {
    console.log(arguments.length);   // prints 2
    // arguments[0] = SyntheticEvent - it's ok
    // arguments[1] = undefined - what is this???
}}>Click me</a>

The event listener called with 2 arguments: synthetic event and strange undefined value.

I think, normal behavior is when handler called with a single param - event object.

Windows 10. Chrome 53. React version - 15.2.0.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 31 (10 by maintainers)

Most upvoted comments

Is there a reason it matters to you?

Yes, it is. I’ve implemented custom basic component:


export class UIComponent extends React.Component {
    // ...

    /**
     *
     * @param {String} fnName
     * @param {*} args
     * @return {Function}
     */
    eventHandler(fnName, ...args) {
        var _this = this;

        return function eventHandler() {
            // Here I expect that arguments length is always 1 - it always get event object.
            _this[fnName](...arguments, ...args);
        };
    }

    // ...

And got a problem with my eventHandler method. This method allows to attach event handlers defined in component classes with some extra data binding, but always with first argument is event object:


class CustomList extends UIComponent {
    render() {
        return (
            <ul>
                {this.props.items.map((item, index) => {
                    return (
                        <li key={index}>
                            <a href="#" onClick={this.eventHandler('onItemClick', index)}>{item.text}</a>
                        </li>
                    );
                })}
            </ul>
        );
    }


    onItemClick(event, index) {
        event.preventDefault();
        console.log(arguments.length);  // 3 - why?
        console.log(index);             // undefined - why?
        console.log(arguments[2]);      // it's index
    }
}

avchugaev on Oct 7, 2016

I think the only argument that’s part of the React contract is the event. If you see other arguments there it’s a bug. That said if you get these arguments from a third party library, that library could be adding arguments.

gaearon on Jul 11, 2017

Guys. I do not have a complete picture of how the React works from the inside, so in this situation from me will be of little use.

Totally understandable, the codebase can be dense sometimes. But if you wanted to give it a try I would be happy to work with you on your PR! Otherwise one of us will try and get to it when we can 👍

I’m going to close this issue out because I think we’ve identified what those additional arguments are? You should expect to see at least SyntheticEvent (or Proxy) and Event (the native event the browser is passing in, once the changes is master are released.

aweary on Oct 7, 2016