Creating TodoItemComponent

Finally, we will create TodoItemComponent. It is responsible for rendering a to-do item and has a UI for the edit panel and the delete button.

We will create three files in the components folder. First, create a file named ITodoItemProps.ts and insert the following code; the parent component will communicate to-do item details as well as the bound functions to edit and delete the to-do item:

export interface ITodoItemProps { 
  itemId: number; 
  itemTitle: string; 
  itemDone: boolean; 
  edit: any; 
  delete: any; 
} 

Next, create ITodoItemState.ts and insert the following code:

export interface ITodoItemState { 
  itemId?: number; 
  itemTitle?: string; 
  itemDone?: boolean; 
  showPanel?: boolean; 
} 

Again, all the properties in state interface are optional. For each to-to item, we are interested in its data. In addition, we use this.state.showPanel to control the visibility of the edit to-do item panel.

Create the final file, TodoItemComponent.ts, in...