Modifying the ReactTodo component

Next, create a new file in the components folder, name it IReactTodoState.ts, and copy the following code to the file and save it:

import {ITodoItem} from "../ITodoItem"; 
export interface IReactTodoState { 
    todoItems?: ITodoItem[]; 
    showNewTodoPanel?: boolean; 
    newItemTitle?: string; 
    newItemDone?: boolean; 
} 

Here, we declare all objects and variables that we are using to describe the state of our ReactTodo component. Note that all of them are marked as optional with a question mark. When we change the state of our component with the this.setState function, we don't always want to change all of the values, and by making them optional, TypeScript allows us to change just one or a few of them.

In the interface that is used to describe the state of ReactTodo component, the most important property is todoItems, into which we will save the array of to-do items. Then, we have three properties to handle a new to-do item, as...