title: Cannot update during an existing state transition - Not using any illegal setState()
body: <p>Some one Please Help me with this error
   <strong><em>Cannot update during an existing state transition</em></strong></p>
  
  <p>When I am rendering this I'm getting error like below</p>
  
  <blockquote>
    <p>Cannot update during an existing state transition (such as within
    <code>render</code> or another component's constructor). Render methods should be
    a pure function of props and state; constructor side-effects are an
    anti-pattern, but can be moved to <code>componentWillMount</code>.</p>
  </blockquote>
  
  <p>I have tried putting <strong><em>this.props.ifListChanged(this);</em></strong>  this code inside the componentWillUpdate and componentDidUpadate but it is taking too much time but without errors(almost 2 mins).</p>
  
  <pre><code>import React from 'react';
  import ListItemComponent from './ListItem.jsx';
  import DropDownButtonComponent from './DropDownButton.jsx';
  import DropDownStyle from '../../../../css/sass/drop-down.scss';
  
  module.exports = React.createClass({
    handleClick: function () {
      this.setState({open: !this.state.open});
    },
    getInitialState: function () {
      return {
        open: false,
        //listItems: this.props.listItems,
        selectedItems:[],
        title: this.props.dropdownTitle
      }
    },
    handleItemClick: function (item) {
      var selectedItems = [];
      if(this.props.multiple == true){
        selectedItems = this.state.selectedItems;
        if(selectedItems.indexOf(item)==-1){
          selectedItems.push(item);
        }else{
          selectedItems.splice(selectedItems.indexOf(item),1)
        }
        this.setState({
          title: this.state.selectedItems.length+" selected",
          selectedItems: selectedItems
        });
      } else{
        selectedItems = [];
        selectedItems.push(item);
        this.setState({
          title: item,
          selectedItems: selectedItems,
          open: false
        });
      }
      //this.sendStateToParent();
    },
    sendStateToParent: function(){
      this.props.ifListChanged(this);
    },
    handleTextChange: function (event) {
      var filteredItems = [];
      this.props.listItems.map(function(item){
        if(item.toLowerCase().search(event.target.value.toLowerCase()) != -1){
          filteredItems.push(item);
        }
      },this);
      this.setState({
        listItems: filteredItems
      });
    },
    clearSelected: function(){
      this.setState({
        title: this.props.dropdownTitle,
        selectedItems: [],
      });
    },
    render: function () {
      this.props.ifListChanged(this);
      var index = 0;
      var list=[];
      if (this.state.listItems != undefined) {
        list = this.state.listItems.map(function (item) {
          return (
            &lt;ListItemComponent
              key={index++}
              item={item}
              whenItemClicked={this.handleItemClick}
              className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
            /&gt;);
        }.bind(this));
      } else {
        list = this.props.listItems.map(function (item) {
          return (
            &lt;ListItemComponent
              key={index++}
              item={item}
              whenItemClicked={this.handleItemClick}
              className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
            /&gt;);
        }.bind(this));
      }
  
      return &lt;div className="btn-group bootstrap-select form-control"&gt;
        &lt;DropDownButtonComponent
          whenClicked={this.handleClick}
          title={this.state.title}
        /&gt;
        &lt;ul className={"dropdown-menu inner dropdown-menu " + (this.state.open ? "show" : "") }&gt;
          {this.props.search? &lt;li&gt;&lt;input type="text" style={{margin:"auto", maxWidth:"96%"}} onChange={this.handleTextChange} placeholder="Search"/&gt;&lt;/li&gt; :""}
          &lt;li className="disabled"&gt;&lt;a&gt;Select from below list {this.props.multiple ? &lt;i title="clear all" style={{fontSize:"15px"}} onClick={this.clearSelected} className="text-danger fa fa-ban pull-right"&gt;&lt;/i&gt;: ""}&lt;/a&gt;&lt;/li&gt;
          {list}
        &lt;/ul&gt;
      &lt;/div&gt;
    }
  });
  </code></pre>
  
  <p><strong>ListItem.jsx</strong></p>
  
  <pre><code>import React from 'react';
  
  module.exports = React.createClass({
    handleClick: function() {
      this.props.whenItemClicked(this.props.item);
    },
    render: function() {
      return &lt;li onClick={this.handleClick} className={this.props.className}&gt;
        &lt;a&gt;{this.props.item}&lt;/a&gt;
      &lt;/li&gt;
    }
  });
  </code></pre>
  
  <p><strong>DropDownButton.jsx</strong></p>
  
  <pre><code>import React from 'react';
  
  module.exports = React.createClass({
    render: function() {
      return &lt;button  onClick={this.props.whenClicked} className="btn dropdown-toggle btn-default" type="button"&gt;
        &lt;span className="filter-option pull-left"&gt;{this.props.title}&lt;/span&gt;
        &lt;span className="bs-caret"&gt;&lt;i className="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/button&gt;
    }
  });
  </code></pre>
  
  <p>Advance thanks to the one who helps me. Thank you.</p>