I'm using Axios to handle my server calls. See below for where I call the server.

 export async function deleteProject(projectId) {
  return await axios({
    url: config.projectsEndpoint + "/" + projectId.projectId,
    method: "DELETE",
  });
}

I have an event handler that deletes a project and it includes a try-catch block. Funny enough, when I preface the deleteProject() function with await, the try part of my block does not work, but the catch part does. My toast notifications appear beautifully. When I take away await, the try part of my block works but my catch toast notifications do not appear. Please see below for the handler.

handleArchive = async project => {
      const originalProjects = this.state.projects;

      const projects = originalProjects.filter(p =>
        p.projectId !== project);
        this.setState({ projects })

      try {
      await deleteProject(project)
      console.log(project)
      console.log(project)
      } catch (ex) {
        if (ex.response && ex.response.status === 404) {
          toast.error("This project may have already been deleted");
        this.setState({ projects: originalProjects })
      }
        else if (ex.response && ex.response.status === 400) {
          toast.error("Oops! We are having trouble deleting that project.");

        this.setState({ projects: originalProjects })
      }
     }
    }

Also, here is where I call the onClick event.

{
      key: 'archive',
      content: project=>
      <button
      style={{color: "white"}}
      onClick={() => this.props.onArchive(project.projectId)}
      className="btn btn-sm"
      href="#">
          <i
          className="fa fa-trash-o fa-lg m-1">
          </i>
          Archive
      </button>
    }

I'm getting a 400 error with this handler setup as well. Please let me know if you need more information. Any help is appreciated, I am so lost.