State is an object that determines how the component behaves and renders. We need to introduce state into our app, in order to manage whether our confirmation dialog is open or closed.
This particular state is going to live and be managed within the App component, and be passed in as a prop to the Confirm component.
- First, create an open prop in the Confirm component by adding it to its props interface:
interface IProps {
open: boolean;
title: string;
content: string;
cancelCaption?: string;
okCaption?: string;
onOkClick: () => void;
onCancelClick: () => void;
}
- We're going to use the open prop in the render function to determine whether the dialog is visible or not. The confirm-visible CSS class makes the dialog visible.
So, on the outermost div, let's use a JavaScript ternary expression in the className attribute to only include...