#StackBounty: #reactjs react error when trying to update state of parent properties when closing a modal dialog

Bounty: 50

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 "X" 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:

Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

This is the parent component:

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 (
            <div className='container-fluid'>
                {this.state.showEditUserModal ?
                    <AccountEditModal userId={this.state.userId}
                        parentCloseAccountEditModal={() => this.handleAccountEditClose()}></AccountEditModal>
            </div>
            )
        }

AccountEditModal:

export default class AccountEditModal extends React.Component {
    constructor(props, context) {
        super(props);
        this.state = {
            uId: null,
            userName: '',
            showModal: true,
        }        
    }

    handleClose = (e) => {
        this.setState({ showModal: false, uId: null, userName: '' });
    }
    
    render() {        
        return (            
                <div >
                    <Modal show={this.state.showModal} onHide={() => { this.handleClose(); this.props.parentCloseAccountEditModal() }} centered >
                        <Modal.Header closeButton>
                            <Modal.Title>Account Edit</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <div className="row">                                    
                                <div className="row pad-top float-right">
                                    <div className='col-md-2 my-auto'>
                                        <span id='btnCloseAccountEdit' onClick={() => { this.handleClose(); this.props.parentCloseAccountEditModal() }}
                                            className='btn btn-success'>Close</span>
                                    </div>
                                </div>
                            </div>
                        </Modal.Body>
                    </Modal>
                </div>
        )
    }

How can i update the parent component properties without getting this error?

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.