Step 4 - Creating the ITodoItem interface and mockup data

Create a new file called ITodoItem.ts in the web part's src\webparts\reactTodo folder, and insert the following code and save the file:

export interface ITodoItem { 
    Id: number; 
    Title: string; 
    Done: boolean; 
} 

As you can see, we kept the data model very simple. It will be a POJO (Plain old JS object--wait, that's Java, oh well!)--this would be the model if we were doing a more conventional MVC pattern. It has only three properties that can easily be implemented in the SharePoint list as well.

Next, create a new file called TodoClient.ts in the web part's src\webparts\reactTodo folder, and insert the following code and save the file:

import { ITodoItem } from "./ITodoItem"; 
 
export default class TodoClient { 
private _todoItems: ITodoItem[] = [ 
    { Id: 1, Title: "Todo item 1", Done: true }, 
    { Id: 2, Title: "Todo item 2", Done: false }, 
    { Id: 3, Title: &quot...