title: React onClick event not firing when it is conditionally rendered
body: <p>I am building a searchDropdown component in React. I want to render dropdown only when search field is active. So I put a condition to render dropdown.</p>
  
  <p>But when the dropdown is rendered conditionally, <code>onClick</code> events inside dropdown are not triggering.</p>
  
  <p>My component is below.</p>
  
  <pre><code>import React, {Component} from 'react';
  import PropTypes from 'prop-types';
  import {List, ListItem} from 'material-ui/List';
  import {Card} from 'material-ui/Card';
  import Divider from 'material-ui/Divider';
  import TextField from 'material-ui/TextField';
  import resources from '../../resources/resources';
  import cx from 'classnames';
  
  import './SearchDropdown.scss';
  
  class SearchDropdown extends Component {
    constructor(props) {
      super(props);
      this.cardContainerStyle = {
        'maxHeight': '300px',
        'overflow': 'scroll',
        'border': '1px solid rgb(158, 158,158)'
      };
      this.searchFieldUnderlineStyle = {
        'borderBottom': '1px solid #ccc'
      }
      this.state = {
        dropdownStyle: {}
      };
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.isActive &amp;&amp; this.props.isActive !== nextProps.isActive) {
        this.shouldSetBounds = true;
      } else {
        this.shouldSetBounds = false;
      }
    }
  
  
  
    componentDidUpdate() {
      if(this.shouldSetBounds) {
        this._setDropdownBounds();
        this.shouldSetBounds = false;
      }
    }
  
    componentDidMount() {
      window.addEventListener('scroll',  this._handleScroll);
    }
  
    componentWillUnmount() {
      window.removeEventListener('scroll',  this._handleScroll);
    }
  
    _handleScroll = () =&gt; {
      if (this.props.isActive) {
        this._setDropdownBounds();
      }
    }
  
    _setDropdownBounds() {
      const dropdownContainerOffset = this.dropdownContainer.getBoundingClientRect();
      const containerTop = dropdownContainerOffset.top;
      const containerLeft = dropdownContainerOffset.left;
      const viewportHeight = window.innerHeight;
      const viewportWidth = window.innerWidth;
      const dropdownStyle = {
        top: dropdownContainerOffset.top + dropdownContainerOffset.height,
        left: dropdownContainerOffset.left
      };
  
      if (containerTop &gt; viewportHeight/2) {
        dropdownStyle.top = 'auto';
        dropdownStyle.bottom = viewportHeight - containerTop;
      }
      this.setState({ dropdownStyle });
    }
  
    _renderDropdown() {
      const {onSelect, datalist = []} = this.props;
  
        return (
          &lt;div className="search-dropdown-wrapper" style={this.state.dropdownStyle} onClick={(event) =&gt; {alert("Outer wrapper")}}&gt;
            &lt;Card containerStyle={this.cardContainerStyle}&gt;
              &lt;div&gt;
              {"Sample Dropdown"}
              &lt;/div&gt;
            &lt;/Card&gt;
          &lt;/div&gt;
        );
    }
  
    _renderSearchField() {
      const {value, handleSearch} =  this.props;
  
      return (
        &lt;TextField
          value={value}
          onChange={handleSearch}
          fullWidth={true}
          hintText={resources.BRAND_SEARCH}
          underlineStyle={this.searchFieldUnderlineStyle}
        /&gt;
      );
    }
  
    render() {
      const {isActive, onBlur} = this.props;
  
      return (
        &lt;div className="search-dropdown-container field-wrapper"
          ref={dropdownContainer =&gt; this.dropdownContainer = dropdownContainer}
          onBlur={onBlur}
          &gt;
          {this._renderSearchField()}
          {isActive &amp;&amp; this._renderDropdown()}
        &lt;/div&gt;
      );
    }
  }
  
  SearchDropdown.propTypes = {
    isActive: React.PropTypes.bool.isRequired,
    value: React.PropTypes.string,
    datalist: React.PropTypes.array,
    handleSearch: React.PropTypes.func.isRequired,
    onSelect: React.PropTypes.func
  }
  
  export default SearchDropdown;
  </code></pre>
  
  <p>In above code, <code>_renderDropdown</code> will only execute when <code>isActive</code> is <code>true</code>. The compoenent is getting rendered perfectly with all styles when the search field is active. But when this component is rendered, the <code>onClick</code> event on the <code>div</code> with class <code>search-dropdown-wrapper</code> is not working.</p>
  
  <p>I'm not sure where I'm doing mistake. Please let me know if there is any proper way to do this. Thanks.</p>