When a user adds a todo, let's call the POST method on the Todo API to add the todo to the backend:

1. Let's start by adding a method to TodoDataService to create a todo:

class TodoDataService {

    createTodo(name, todo) {
        return axios.post(`${TODO_API_ROOT}/users/${name}/todos`, todo);
    }
}

The axios.post method sends a POST request to the API with the todo details.

2. We can add a call to createTodo in the addTodo(e) method of TodoComponent:

TodoDataService.createTodo(HARDCODED_USER_NAME, newTodo)
    .then(
        response => {
            console.log(response);
        }
    )

When the response comes back, we log it into the console.

3. When we add a todo, "Learn React", it is added both to the frontend and backend. You can see the details of the POST RESTful API call in the browser Network tab:

In the last few sections, we developed a simple React application. In the following section, let's see how to interact with a secured API.