boom boom - 1 year ago 161
React JSX Question

React.js onClick event returning all null values

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

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?

Answer Source

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 =
  console.log.apply(console,, 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();
        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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download