React array not updating when deleting or editing an item, from database

Question

I have an array of items, where i can delete, view and edit a Post. But when i delete one of the items, by clicking the delete button, it doesn't update the list in React (but does in my database, so the request works).

My Profile.js component

import React, { useContext, useEffect, useState, useCallback } from "react";
import DbContext from "../../../context/DbContext";
import ForumIcon from "@material-ui/icons/Forum";

// import history from "../history";
import { Link } from "react-router-dom";
import confirm from "reactstrap-confirm";
import { IconButton } from "@material-ui/core";

import { PencilSquare, Eye } from "react-bootstrap-icons";

const Profile = (props) => {
  // getting  posts
  const [post, setPost] = useState();
  const [user, setUser] = useState();
  const context = useContext(DbContext);
  const [refresh, setRefresh] = useState(false);

  useEffect(() => {
    context.getPosts().then((x) => setPost(x));
    setUser(context.getUser());
  }, [context.existsUser()]);

  // delete
  const handleDelete = useCallback(async (event) => {
    event.preventDefault();
    context.deletePost(event.target.id);
  });

 
  return (
    <>
      <section className="container-fluid my-2">
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <div className="row">
                <div className="col-12">
                  <img
                    className="img-fluid"
               
                    alt="Profile image"
                  />
                </div>
                <div className="col-12">
                  <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                      Alder:{" "}
                      <span className="text-right">
                        {new Date().getFullYear() -
                          new Date(user?.dateOfBirth).getFullYear()}
                      </span>
                    </li>
                    <li className="list-group-item">
                      Location: {user?.location}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-9">
            {/* Edit User */}
            <Link
              to="/editUser"
              className="btn btn-primary position-absolute"
              style={{ right: 15, top: 50 }}
            >
              Rediger bruger
            </Link>
            {/* Create Post */}
            <Link
              to="/createpost"
              className="btn btn-primary position-absolute"
              style={{ right: 15, top: 100 }}
            >
              Opret annonce
            </Link>
            <hr />
            <p> {user?.contentBio}</p>
          </div>
        </div>
      </section>

 

      {/* Posts */}
      <div className="container">
        <div className="row">
          <div className="col-12">
            <h1>Dine annoncer</h1>
            <table className="table table-bordered">
              <thead>
                <tr>
                  <th scope="col">Oprettet</th>
                  <th scope="col">Annonce titel</th>
                  <th scope="col">Pris</th>
                  <th scope="col">Se/Rediger/Slet</th>
                </tr>
              </thead>
              <tbody>
                {user?.posts && user?.posts.length > 0
                  ? user.posts.map((post) => (
                      <tr key={post.id}>
                        <th scope="row">{post.date}</th>
                        <td>{post.title}</td>
                        <td>{post.price} kr.</td>
                        <td>
                          <Link
                            to={`/showpost/${post.id}`}
                            type="button"
                            className="btn btn-primary"
                          >
                            <Eye />
                          </Link>
                          <Link
                            to={`/editpost/${post.id}`}
                            type="button"
                            className="btn btn-success"
                          >
                            <PencilSquare />
                          </Link>
                          <Link
                            to=""
                            id={post.id}
                            onClick={handleDelete}
                            type="button"
                            className="btn btn-danger"
                          >
                            {/* THIS IS MY DELE BUTTON */}
                            DELETE
                          </Link>
                        </td>
                      </tr>
                    ))
                  : "No posts"}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
};

export default Profile;

Method to refresh user in my DbProvider.js:

 refreshUser: async () => {
            try {
              await axios
                .get(
                  baseApi +
                    `users/login?email=${user.email}&password=${user.password}`
                )
                .then((x) => {
                  setUser(x.data);
                  localStorage.setItem("user", JSON.stringify(x.data));
                  forceUpdate();
                });
            } catch (err) {
              return false;
            }
          }

My Delete method in DbProvider.js:

 deletePost: async (id) => {
            let response = await axios.delete(baseApi + `posts/` + id);
            console.log(response.data);
            return response.data;
          }

UPDATE getPosts method in DbProvider

  getPosts: async () => {
            let response = await axios.get(baseApi + `posts`);

            console.log(response.data);
            return response.data;
          },

Answer 1

If deletePost does not return the new array then fetch your posts again

const handleDelete = useCallback(async (event) => {
  event.preventDefault();
  await context.deletePost(event.target.id);
  const newPosts = await context.getPosts();
  setPost(newPosts);
});