Cannot read property addEventListener of null

[gsabran]

I've a component whose render method looks like

render() {
    const {condition} = this.state;

    if (!condition) {
      return null;
    }

    return <div onClick={() => { doSomething(); }} >
      ...
    </div>
  }

When the state changes and condition changes from true to false, this triggers the error

EventListener.js:37 Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is the trace if that helps:

EventListener.listen    @   EventListener.js:37
SimpleEventPlugin.didPutListener    @   SimpleEventPlugin.js:612
EventPluginHub.putListener  @   EventPluginHub.js:113
putListener @   ReactDOMComponent.js:175
_assign.notifyAll   @   CallbackQueue.js:66
ON_DOM_READY_QUEUEING.close @   ReactReconcileTransaction.js:79
Mixin.closeAll  @   Transaction.js:202
Mixin.perform   @   Transaction.js:149
Mixin.perform   @   Transaction.js:136
_assign.perform @   ReactUpdates.js:89
flushBatchedUpdates @   ReactUpdates.js:165
ReactUpdates_flushBatchedUpdates    @   ReactPerf.js:66
Mixin.closeAll  @   Transaction.js:202
Mixin.perform   @   Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @   ReactDefaultBatchingStrategy.js:63
batchedUpdates  @   ReactUpdates.js:97
ReactEventListener.dispatchEvent    @   ReactEventListener.js:150

Returning an empty div instead of null fixes the issue:

render() {
    const {condition} = this.state;

    if (!condition) {
      return <div></div>;
    }

    return <div onClick={() => { doSomething(); }} >
      ...
    </div>
  }

[aweary]

@gsabran can you a share a JSFiddle reproducing the error?

[jimfb]

Probably a duplicate of #6538

[gsabran]

Sounds like a duplicate. Sorry about that. I could not get a simple JSFiddle to reproduce... Feel free to close it.