React.js onClick event returning all null values

Question

module.exports = React.createClass({
  click: function(e){
    console.log(e)
  },
  render: function() {
    return div({className: "thing1", children:[
      div({className: "thing2", onClick: this.click})
    ]})
  }
})

The event that is passed to contains all the making of a click object but the values are null.

Object { dispatchConfig: null, dispatchMarker: null, nativeEvent: null, type: null, target: null, currentTarget: null, eventPhase: null, bubbles: null, cancelable: null, timeStamp: null, 22 more… }

Any ideas?

Aliaksandr Sushkevich · Accepted Answer · 2018-07-05 11:01:10Z

30

React pools event objects for performance reasons. So it takes an event object from the pool, sets properties on it, calls your handler, and then sets all of the properties to null so it can be reused.

This is mostly only a problem because the console lazily evaluates the object you log. You could do a shallow clone of the event object to make console.log work.

For debugging purposes,

console.shallowCloneLog = function(){
  var typeString = Function.prototype.call.bind(Object.prototype.toString)
  console.log.apply(console, Array.prototype.map.call(arguments, function(x){
    switch (typeString(x).slice(8, -1)) {
      case 'Number': case 'String': case 'Undefined': case 'Null': case 'Boolean': return x;
      case 'Array': return x.slice();
      default: 
        var out = Object.create(Object.getPrototypeOf(x));
        out.constructor = x.constructor;
        for (var key in x) {
          out[key] = x[key];
        }
        Object.defineProperty(out, 'constructor', {value: x.constructor});
        return out;
    }
  }));
}

console.shallowCloneLog(e)

edited Jul 5, 2018 at 11:01

Aliaksandr Sushkevich

12.5k8 gold badges41 silver badges46 bronze badges

answered Oct 11, 2014 at 19:38

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

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

1 Comment

Michelle Tilley Over a year ago

For simple debugging purposes, calling persist() on the event before logging it may be a fine workaround.

Aliaksandr Sushkevich · Accepted Answer · 2018-07-05 11:00:54Z

22

Event handlers will be passed instances of SyntheticEvent. The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked.

If you want to access the event properties in an asynchronous way, you should call event.persist()

func(e){
    e.persist();
    console.log(e);// all the properties are retained
}

render () {
    return(
      <div onMouseOver={this.func}>
      //rest of the logic
      </div>
    );
}

edited Jul 5, 2018 at 11:00

Aliaksandr Sushkevich

12.5k8 gold badges41 silver badges46 bronze badges

answered Sep 26, 2016 at 16:58

Sanjeev

4,3753 gold badges31 silver badges37 bronze badges

Comments

Kevin Velasco · Accepted Answer · 2016-08-28 17:30:17Z

5

If you're using stage-2 or up of the ES6 features console.log({...e}) would work the same as the shallow clone implementation above.

answered Aug 28, 2016 at 17:30

Kevin Velasco

4,9941 gold badge18 silver badges6 bronze badges

Comments

Rob Campion · Accepted Answer · 2015-05-21 14:07:48Z

3

If you have jQuery handy, simply call:

console.log('e: ', $.extend({}, e));

answered May 21, 2015 at 14:07

Rob Campion

1,37915 silver badges26 bronze badges

1 Comment

Phil Mander Over a year ago

One is probably more likely to have Object.assign: console.log(Object.assign({}, ev));

Aaron Bangerter · Accepted Answer · 2016-11-13 09:32:38Z

2

Using console.log(Object.assign({}, e)); is an elegant way to handle this--a good alternative jQuery's extend method.

In the interest of teaching a man to fish, it'd be good to learn how this works. Here's the direct link to that section from ES2015 specs: http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign

answered Nov 13, 2016 at 9:32

Aaron Bangerter

878 bronze badges

Collectives™ on Stack Overflow

React.js onClick event returning all null values

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related