How to handle dirty in wizard type form

Question

If user clicking back button and any of the form is dirty it will show a pop up that u made some changes , do you want to exit .

what happening here is , user did not make any change in first form and made changes in second form and come back to the first form and clicking the back button it goes out of the form without showing the pop up.

its because of , initially { this.props.dirty = false } , any changes done in second form the dirty becomes true , while moving to the previous form that is first form {this.props.dirty become false} as initial stage , can anyone help me to handle this , thanks in advance

  goBack = () => {
       if (this.props.dirty) {
         this.toggleClose();
       } else {
         this.gotoUserListPage();
         }
         };

Answer 1

keep a state,

  this.state = {dirty : false}

and in the next and previous page function,

 if (this.props.dirty) {
      this.setState({dirty: true});
    }

and in the back button function ,

     goBack = () => {
    if (this.props.dirty || this.state.dirty) {
      this.toggleClose();
    } else {
      this.gotoUserListPage();
    }
  };