When the confirmation dialog buttons are clicked, we want to close the dialog. So, we want to change the state of confirmOpen to be false when the buttons are clicked.

We already have arrow function handlers for the button click events, so perhaps we can change state in there:

1. Let's try to do that in handleOkConfirmClick, replacing the console.log:

private handleOkConfirmClick = () => {
  this.state.confirmOpen = false;
};

We get a compilation error, as follows:

The error message is saying that the state is read-only! Why is this so, and how can we change the state?

We need to use a method called setState in the component class to change state. This helps ensure we manage state robustly and efficiently. setState takes a parameter, which is an object literal containing the state we want to change.

2. Let's change our code to use setState:

private handleOkConfirmClick = () => {
  this.setState({ confirmOpen: false });
};

The compilation error disappears, and if we click Yes please! in the running app, the confirmation dialog will now close. We have successfully changed the state.

3. Change the implementation of handleCancelConfirmClick to close the dialog as well:

private handleCancelConfirmClick = () => {
  this.setState({ confirmOpen: false });
};

After we close the confirmation dialog, we have no way to open it.

4. So, let's add a button labeled Confirm that does that in App.tsx:

<button onClick={this.handleConfirmClick}>Confirm</button>
<Confirm ... />

5. We need to create the handler that we just referenced:

private handleConfirmClick = () => {
  this.setState({ confirmOpen: true });
};

We can now click the Confirm button to reopen the confirmation dialog when it has been closed.

6. Let's add a piece of text above the Confirm button in App.tsx that changes depending on whether the confirmation dialog is canceled or okayed. We'll define an additional state to drive this text:

interface IState {
  confirmOpen: boolean;
  confirmMessage: string;
}

7. Now, let's initialize the message in the constructor:

constructor(props: {}) {
  super(props);
  this.state = {
    confirmMessage: "Please hit the confirm button",
    confirmOpen: true,
  };
}

8. The state is now changed when the confirmation dialog is okayed or canceled:

private handleOkConfirmClick = () => {
  this.setState({
    confirmMessage: "Cool, carry on reading!",
    confirmOpen: false
  });
};

private handleCancelConfirmClick = () => {
  this.setState({
    confirmMessage: "Take a break, I'm sure you will later ...",
    confirmOpen: false
  });
};

9. Finally, we can render the message above the Confirm button:

<p>{this.state.confirmMessage}</p>
<button onClick={this.handleConfirmClick}>Confirm</button>
<Confirm ... />

If we play with the running app now, we'll see the message in our app changing depending on whether we okay or cancel the confirmation dialog.

Although we can set the state prop directly in the constructor when we initialize it, we can't elsewhere in a class component. Instead, state should be changed by calling the setState method in the component class.