Learn React with TypeScript 3

Deleting data with axios

Let's move on to deleting data now. We are going to allow the user to click a Delete button in an existing post to delete it:

1. Let's first create a Delete button in each list item in the posts:

<li key={post.id}>  <h3>{post.title}</h3>  <p>{post.body}</p>  <button onClick={() => this.handleUpdateClick(post)}>    Update  </button>  <button onClick={() => this.handleDeleteClick(post)}>    Delete  </button></li>

2. We can now create the Delete button click handler:

private handleDeleteClick = (post: IPost) => {  axios    .delete(`https://jsonplaceholder.typicode.com/posts/${post.id}`)    .then(() => {      this.setState({        posts: this.state.posts.filter(p => p.id !== post.id)      });    });};

So, we use the axios delete method to make an HTTP DELETE ...