title: react error when trying to update state of parent properties when closing a modal dialog
body: <p>I have a table of accounts that contains an edit option.  When the edit option is clicked, an account edit modal dialog is displayed.  The user has the option to close or cancel the edit by clicking the &quot;X&quot; in the top  right corner or  clicking a Close button.  When the modal closes there are state properties that i would like to clear, both dialog properties and parent component properties.  The dialog properties are updated without any issues but i receive this error when the parent properties are attempted to be updated:</p>
  <blockquote>
  <p>Cannot update during an existing state transition (such as within <code>render</code>). Render methods should be a pure function of props and state.</p>
  </blockquote>
  <p>This is the parent component:</p>
  <pre><code>export class Accounts extends Component {
  
      constructor(props, context) {
          super(props);
          this.state = {
              loading: true,
              showEditUserModal: false,                
              userId: null,
              redraw: false,
          }
          this.handleAccountEdit = this.handleAccountEdit.bind(this);
      }
  
      handleAccountEdit(cell, row, rowIndex) {
          this.setState({ userId: cell },
              this.setState({ showEditUserModal: true }));
      }
      
      //This is parent function being called from dialog close Error occurs here
      handleAccountEditClose() {
          this.setState({ userId: null, showEditUserModal: false, redraw: true });
      }
  
      render() {
          return (
              &lt;div className='container-fluid'&gt;
                  {this.state.showEditUserModal ?
                      &lt;AccountEditModal userId={this.state.userId}
                          parentCloseAccountEditModal={() =&gt; this.handleAccountEditClose()}&gt;&lt;/AccountEditModal&gt;
              &lt;/div&gt;
              )
          }
  </code></pre>
  
  <p>AccountEditModal:</p>
  <pre><code>export default class AccountEditModal extends React.Component {
      constructor(props, context) {
          super(props);
          this.state = {
              uId: null,
              userName: '',
              showModal: true,
          }        
      }
  
      handleClose = (e) =&gt; {
          this.setState({ showModal: false, uId: null, userName: '' });
      }
      
      render() {        
          return (            
                  &lt;div &gt;
                      &lt;Modal show={this.state.showModal} onHide={() =&gt; { this.handleClose(); this.props.parentCloseAccountEditModal() }} centered &gt;
                          &lt;Modal.Header closeButton&gt;
                              &lt;Modal.Title&gt;Account Edit&lt;/Modal.Title&gt;
                          &lt;/Modal.Header&gt;
                          &lt;Modal.Body&gt;
                              &lt;div className=&quot;row&quot;&gt;                                    
                                  &lt;div className=&quot;row pad-top float-right&quot;&gt;
                                      &lt;div className='col-md-2 my-auto'&gt;
                                          &lt;span id='btnCloseAccountEdit' onClick={() =&gt; { this.handleClose(); this.props.parentCloseAccountEditModal() }}
                                              className='btn btn-success'&gt;Close&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/Modal.Body&gt;
                      &lt;/Modal&gt;
                  &lt;/div&gt;
          )
      }
  </code></pre>
  <p>How can i update the parent component properties without getting this error?</p>
  <p>The suggested solution does not call a parent component function. I changed the handleClose to a lambda in the AccountEditModal but still receive the same error.</p>