I’m currently on the “Expected vs Unexpected Errors” lecture and at 5:29 I’m supposed to get an error message “This post has already been deleted” and I’m not getting anything. I checked my code more than once and looks correct to me, what could I be missing?
Thanks,
Here’s my code:
App.js
import React, { Component } from “react”;
import axios from “axios”;
import “./App.css”;
const apiEndpoint = “https://jsonplaceholder.typicode.com/posts”;
class App extends Component {
state = {
posts: [],
};
// componentDidMount(): Called immediately after a component is mounted.
// async: An async function is a function declared with the async keyword
// and the await keyword is permitted within it.
async componentDidMount() {
// pending > resolved (success) OR rejected (failure)
const { data: posts } = await axios.get(apiEndpoint);
this.setState({ posts });
//console.log(response);
}
// handleAdd is a property we’re setting to a function which is why handleAdd = async () => {}
handleAdd = async () => {
const obj = { title: "a", body: "b" };
// posts = (url: string, data?: any, config?: AxiosRequestConfig)
const { data: post } = await axios.post(apiEndpoint, obj);
// Create new array with post (data) and posts array
// Clone posts array
const posts = [post, ...this.state.posts];
this.setState({ posts });
};
handleUpdate = async (post) => {
post.title = "UPDATED";
// put: Update all properties
// patch: Update 1 or 2 properties
// put = (url: string, data?: any, config?: AxiosRequestConfig)
await axios.put(apiEndpoint + "/" + post.id, post);
// Clone posts
const posts = [...this.state.posts];
// Aquire index of post
const index = posts.indexOf(post);
// combine posts and index
posts[index] = { ...post };
// update posts
this.setState({ posts });
};
handleDelete = async (post) => {
const originalPosts = this.state.posts;
// Delete post first, than call the database (Optimistic Updates)
// Returns the elements of an array that meet the condition specified in a callback function.
// We want
const posts = this.state.posts.filter((p) => p.id !== post.id);
this.setState({ posts });
// ex: Exception or Error
try {
await axios.delete(apiEndpoint + "/999");
} catch (ex) {
if (ex.response && ex.response.status === 404)
alert("This post has already been deleted.");
else {
console.log("Logging the error", ex);
alert("An unexpected error occurred.");
}
// Set the posts to original posts
this.setState({ posts: originalPosts });
}
};
render() {
return (
<React.Fragment>
<button className="btn btn-primary" onClick={this.handleAdd}>
Add
</button>
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.posts.map((post) => (
<tr key={post.id}>
<td>{post.title}</td>
<td>
<button
className="btn btn-info btn-sm"
onClick={() => this.handleUpdate(post)}
>
Update
</button>
</td>
<td>
<button
className="btn btn-danger btn-sm"
onClick={() => this.handleDelete(post)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</React.Fragment>
);
}
}
export default App;