javascript - setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor) -

i have component below:

const view_profile = 'profile' const view_saa = 'saa' const view_documents = 'documents' const view_financiers = 'viewfinancierinfo'  class viewfinancier extends component {   constructor(props) {     super(props)     this.state = {       selectednavigation: view_profile,       financierid: this.props.location.state.financierdetails.financierid,       defaultloading: false     }      this.handlechangenav = this.handlechangenav.bind(this)     this.handlecancelbutton = this.handlecancelbutton.bind(this)   }    componentwillmount(props) {     this.props.loadfinancierprofile(this.props.location.state.financierdetails.financierid)   }    componentwillreceiveprops(newprops) {     this.setstate({       defaultloading: true,       viewfinancierprofiledata: newprops.viewfinancierprofiledata     })   }    handlechangenav(e) {     var selectednavigation = e.target.attributes.getnameditem('value').value     this.setstate({       selectednavigation: selectednavigation     })   }    handlecancelbutton(changingstate) {     this.setstate({       selectednavigation: changingstate     })   }    render() {     if (this.state.defaultloading === false) {       return (         <div classname="tabledataloading tabletext">           please wait while data loading <img alt="loading..." src={loadingimg} />         </div>       )     } else if (this.state.selectednavigation === view_financiers) {       this.props.history.push('/financier/')       return null     } else {       return (         <div id="lesse-info-component-wrapper" classname="melody-common-container">           <div id="header-wrapper">             <h1 classname="melody-common-module-title">view financier info</h1>           </div>           <div id="navigation-wrapper">             <ul id="add-financier-info-nav" classname="topnavpad">               <li                 value={view_profile}                 onclick={this.handlechangenav}                 classname={'add-financier-info-nav-item ' + (this.state.selectednavigation === view_profile ? 'active' : '')}>                 profile               </li>               <li                 value={view_saa}                 onclick={this.handlechangenav}                 classname={'add-financier-info-nav-item ' + (this.state.selectednavigation === view_saa ? 'active' : '')}>                 saa               </li>               <li                 value={view_documents}                 onclick={this.handlechangenav}                 classname={'add-financier-info-nav-item ' + (this.state.selectednavigation === view_documents ? 'active' : '')}>                 documents               </li>             </ul>           </div>           {this.state.selectednavigation === view_profile             ? <viewfinancierprofile financierid={this.props.financierid} oncancelhandler={this.handlecancelbutton} />             : null}           {this.state.selectednavigation === view_saa             ? <viewfinanciersaa financierid={this.props.financierid} oncancelhandler={this.handlecancelbutton} />             : null}           {this.state.selectednavigation === view_documents             ? <viewfinancierdocument financierid={this.props.financierid} oncancelhandler={this.handlecancelbutton} />             : null}         </div>       )     }   } }  const mapstatetoprops = state => {   return {     viewfinancierprofiledata: state.viewfinancierprofiledata   } }  const mapdispatchtoprops = dispatch => {   return {     loadfinancierprofile: financierid => dispatch(viewfinancierprofileaction.loadfinancierprofile(financierid))   } }  export default connect(mapstatetoprops, mapdispatchtoprops)(viewfinancier) 

and on execution getting warning:warning: setstate(...): cannot update during existing state transition (such withinrenderor component's constructor). render methods should pure function of props , state; constructor side-effects anti-pattern, can moved tocomponentwillmount`

on looking console found snippet this.props.history.push('/financier/') throwing error.

on further research in other similar questions in stackoverflow, found setting parents state under render method, not allowed.

but cannot figure out how can achive condition looking for.

please suggest. in advance

component props should not mutated itself. think there 2 solutions in situation.

1. copy this.props.history state, , mutate history calling setstate. put checking of selectednavigation outside of render. example (just idea, please modify base on application logical):

class viewfinancier extends component {    constructor(props) {      super(props)      this.state = {        ...        history = props.history,        ...      }      ...    }      componentwillreceiveprops(newprops) {      this.setstate({        history: newprops.history,        ...      })    }        handlechangenav(e) {      var selectednavigation = e.target.attributes.getnameditem('value').value;            this.setstate({        selectednavigation: selectednavigation            })            this.historycheck(selectednavigation);    }      handlecancelbutton(changingstate) {      this.setstate({        selectednavigation: changingstate      });            this.historycheck(changingstate);    }        historycheck(nav) {      if (nav === view_financiers) {        history.push('/financier/');      };            this.setstate(history: history);    }      render() {          ...      } else if (this.state.selectednavigation === view_financiers) {        return null      }      ...    }  }

2. if this.props.history used parent component also. can pass function update history parent component , pass function current (child) component.

class parentfinancier extends component {    pushhistory => (val) {      let {history} = this.state;      this.setstate(history: history.push('/financier/'));    }        render() {      ...      <viewfinancier pushhistory={this.pushhistory} ... />    }    ...  }        class viewfinancier extends component {    ...    } else if (this.state.selectednavigation === view_financiers) {      this.props.pushhistory('/financier/')      return null       }    ...  }    ...