Modifying the web part file

Open ReactTodoWebPart.ts and add the following code at the end of import statements, before the class definition begins:

import TodoClient from "./TodoClient"; 

Next, replace the existing render function with the following code:

public render(): void { 
    const element: React.ReactElement<IReactTodoProps> = React.createElement( 
      ReactTodo, 
      { 
        description: this.properties.description, 
        todoClient: new TodoClient() 
      } 
    ); 
    ReactDom.render(element, this.domElement); 
} 

As you can see, as part of IReactTodoProps, we are passing a new TodoClient object. At this point, Visual Studio Code will note that IReactTodoProps doesn't include TodoClient, so we open IReactTodoProps.ts under the components folder to fix it. Replace the contents with the following code:

import TodoClient from '../TodoClient'; 
export interface IReactTodoProps { 
  description: string; 
  todoClient: TodoClient; 
} 

...