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; 
} 

We won't use description in this web part, but we leave it there in case you want to modify the web part later to use web part properties and use it as an example. React components use props and states, as described earlier in this chapter. When we are using TypeScript with React, it is good practice to declare the properties as strongly typed objects, and this is what the IReactTodoProps interface is for.