Alert not showing

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?


Here’s my code:

import React, { Component } from “react”;

import axios from “axios”;

import “./App.css”;

const apiEndpoint = “”;

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



// 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, 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);

// Clone posts

const posts = [...this.state.posts];

// Aquire index of post

const index = posts.indexOf(post);

// combine posts and index

posts[index] = { };

// 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) => !==;

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 (


    <button className="btn btn-primary" onClick={this.handleAdd}>



    <table className="table">









        { => (

          <tr key={}>




                className="btn btn-info btn-sm"

                onClick={() => this.handleUpdate(post)}







                className="btn btn-danger btn-sm"

                onClick={() => this.handleDelete(post)}













export default App;

1 Like

jsonplaceholder is a fake-API service that answers http requests with predefined faked responses. If I remember correctly they changed the response to DELETE-requests from “always fail” to “always succeed”. If you check the network traffic you should see a 200 instead of the 404 you expected.

So I checked my network traffic and you’re right, I do have a 200 instead instead of a 404. But is there anything on my code that I need to change? Or should I just move on?

I haven’t checked your code in depth but it looked good to me. Later in the course you will have your own back end for further tests. If you understood what Mosh did it’s ok to move on.

1 Like

Okay thanks for your help!