Learn React with TypeScript 3

Changing state

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 ...