Some one Please Help me with this error Cannot update during an existing state transition

When I am rendering this I'm getting error like below

Cannot update during an existing state transition (such as within render or another ponent'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 ponentWillMount.

I have tried putting this.props.ifListChanged(this); this code inside the ponentWillUpdate and ponentDidUpadate but it is taking too much time but without errors(almost 2 mins).

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 (
          <ListItemComponent
            key={index++}
            item={item}
            whenItemClicked={this.handleItemClick}
            className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
          />);
      }.bind(this));
    } else {
      list = this.props.listItems.map(function (item) {
        return (
          <ListItemComponent
            key={index++}
            item={item}
            whenItemClicked={this.handleItemClick}
            className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
          />);
      }.bind(this));
    }

    return <div className="btn-group bootstrap-select form-control">
      <DropDownButtonComponent
        whenClicked={this.handleClick}
        title={this.state.title}
      />
      <ul className={"dropdown-menu inner dropdown-menu " + (this.state.open ? "show" : "") }>
        {this.props.search? <li><input type="text" style={{margin:"auto", maxWidth:"96%"}} onChange={this.handleTextChange} placeholder="Search"/></li> :""}
        <li className="disabled"><a>Select from below list {this.props.multiple ? <i title="clear all" style={{fontSize:"15px"}} onClick={this.clearSelected} className="text-danger fa fa-ban pull-right"></i>: ""}</a></li>
        {list}
      </ul>
    </div>
  }
});

ListItem.jsx

import React from 'react';

module.exports = React.createClass({
  handleClick: function() {
    this.props.whenItemClicked(this.props.item);
  },
  render: function() {
    return <li onClick={this.handleClick} className={this.props.className}>
      <a>{this.props.item}</a>
    </li>
  }
});

DropDownButton.jsx

import React from 'react';

module.exports = React.createClass({
  render: function() {
    return <button  onClick={this.props.whenClicked} className="btn dropdown-toggle btn-default" type="button">
      <span className="filter-option pull-left">{this.props.title}</span>
      <span className="bs-caret"><i className="fa fa-chevron-down"></i></span>
    </button>
  }
});

Advance thanks to the one who helps me. Thank you.

Some one Please Help me with this error Cannot update during an existing state transition

When I am rendering this I'm getting error like below

Cannot update during an existing state transition (such as within render or another ponent'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 ponentWillMount.

I have tried putting this.props.ifListChanged(this); this code inside the ponentWillUpdate and ponentDidUpadate but it is taking too much time but without errors(almost 2 mins).

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 (
          <ListItemComponent
            key={index++}
            item={item}
            whenItemClicked={this.handleItemClick}
            className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
          />);
      }.bind(this));
    } else {
      list = this.props.listItems.map(function (item) {
        return (
          <ListItemComponent
            key={index++}
            item={item}
            whenItemClicked={this.handleItemClick}
            className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
          />);
      }.bind(this));
    }

    return <div className="btn-group bootstrap-select form-control">
      <DropDownButtonComponent
        whenClicked={this.handleClick}
        title={this.state.title}
      />
      <ul className={"dropdown-menu inner dropdown-menu " + (this.state.open ? "show" : "") }>
        {this.props.search? <li><input type="text" style={{margin:"auto", maxWidth:"96%"}} onChange={this.handleTextChange} placeholder="Search"/></li> :""}
        <li className="disabled"><a>Select from below list {this.props.multiple ? <i title="clear all" style={{fontSize:"15px"}} onClick={this.clearSelected} className="text-danger fa fa-ban pull-right"></i>: ""}</a></li>
        {list}
      </ul>
    </div>
  }
});

ListItem.jsx

import React from 'react';

module.exports = React.createClass({
  handleClick: function() {
    this.props.whenItemClicked(this.props.item);
  },
  render: function() {
    return <li onClick={this.handleClick} className={this.props.className}>
      <a>{this.props.item}</a>
    </li>
  }
});

DropDownButton.jsx

import React from 'react';

module.exports = React.createClass({
  render: function() {
    return <button  onClick={this.props.whenClicked} className="btn dropdown-toggle btn-default" type="button">
      <span className="filter-option pull-left">{this.props.title}</span>
      <span className="bs-caret"><i className="fa fa-chevron-down"></i></span>
    </button>
  }
});

Advance thanks to the one who helps me. Thank you.

• javascript
• reactjs

• Possible duplicate of Why does this error exist: "Invariant Violation: Cannot update during an existing state transition" – The Reason Commented May 18, 2016 at 7:30
• I think you didn't seen my whole problem. Please see the code once. I didn't called any illegal setState() function as of my knowledge. @TheReason – Akhil P Commented May 18, 2016 at 8:04
• It is very strange (and possibly illegal) to call some function on your parent inside render(). What does this.props.ifListChanged(this) do? – wintvelt Commented May 18, 2016 at 8:50
• I just want to send the state of the childComopnent to it's parentComponent. But when I'm using it inside the handleItemClick() previous state is being sent. @wintvelt – Akhil P Commented May 18, 2016 at 9:12
• What does the parent do with the filtered list you send up? My guess: that function triggers another render of the parent, so also render of child, and react does not allow that. This would be a prop/state design issue in your setup. – wintvelt Commented May 18, 2016 at 9:16

1 Answer 1

I think you have a prop/state design issue. Your this.props.ifListChanged(this) inside your render function is very suspicious. Your render function should NOT need to signal anything to parent. Parent already knows all the props it sent down, and if parent needs to know about the state, then it most likely should not be state in the first place.

From what I can gather from your code,

• your List ponent receives an unfiltered list of items as props
• and it has a state that keeps track of filtereditems and of selecteditems.

This is a nice setup if the result of both need to be sent somewhere with another action inside the ponent itself (e.g. a process-selection button or something).
Then (and only then) would you send the state to parent or to somewhere else.

If the parent needs to know about both all the time (for instance when the process-button or process-action is somewhere else), then it is better to:

• define some handleFilterUpdate and 'handleSelectionUpdate` methods inside the parent and pass these as props to the child.
• also pass the filtered list and selection from the parent to the child.
• call the this.props.handleFilterUpdate and 'this.props.handleSelectionUpdate` from the child whenever something happens with selection or filters.