Cannot update during an existing state transition - Not using any illegal setState()
<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>