handleClose: function() {
  this.setState({isOpen: false});

handleGlobalClick: function(event) {
  var _con = this.refs.mC.getDOMNode() // <component ref="mC">
  if (!(_con == && !_con.contains( {

componentDidMount: function() {
  document.body.addEventListener('click', this.handleGlobalClick);

componentWillUnmount: function() {
  document.body.removeEventListener('click', this.handleGlobalClick);

this work on the latest chrome, you can also use the jQuery rewrite the node.contains()


Your issue is that clicking on the link will also call the body click listener. It means that your state will go from:

  1. Click on link
  2. Click listener on body called
  3. set to false
  4. Render called with false
  5. Click listener on the link called
  6. set to true
  7. Render called with true

e.stopPropagation() doesn't work in React. One workaround would be to:

handleBodyClick: function(e)
    if ( !== 'A') {
       this.setState({isOpen: false});

Another way (and better way) would be to have the click listener not on body, but on a div, and make it as big as possible (to be as the same size a body basically).

Here is an example with binding a click on a div instead of body:

Related Query

More Query from same tag