I am trying to add in a list of tasks and want to change them to either "Complete" or "Not Complete" using radio buttons and then updating it to send a PATCH request to the data to update. When I press update nothing changes on the data.

This is the code I have for this page:

`

function ProjectDetails() {
  const [WaxProcedure, setWaxProcedure] = useState("");
  const { id } = useParams();
  const {
    data: project,
    error,
    isPending,
  } = useFetch(`http://localhost:8000/ProjectsData/${id}`);
  const history = useNavigate();

  const handleClickDelete = () => {
    fetch(`http://localhost:8000/ProjectsData/${id}`, {
      method: "DELETE",
    }).then(() => {
      history("/");
    });
  };

  const handleUpdate = () => {
    fetch(`http://localhost:8000/ProjectsData/${id}`, {
      method: "PATCH",
      headers: {
        "Content-type": "application/json",
        body: JSON.stringify(project),
      },
    }).then((response) => {
      response.json();
    });
  };

  return (
    <div className="project-details">
      {isPending && <div>Loading...</div>}
      {error && <div>{error}</div>}
      {project && (
        <article>
          <h1>{project.Customer}</h1>
          <h2>
            {project.Part} {project.Description}
          </h2>
          <h2>{project.Tool}</h2>
          <div>Project Status: {project.Stage}</div>
          <p>Lead engineer: {project.Engineer}</p>
          <div className="procedure-list">
            <form onSubmit={handleUpdate}>
              Wax: <p>{WaxProcedure}</p>
              <input
                type="radio"
                name="waxprocedure"
                value="Not Complete"
                required
                onChange={(e) => setWaxProcedure(e.target.value)}
              />
              Not Complete
              <input
                type="radio"
                name="waxprocedure"
                value="Complete"
                required
                onChange={(e) => setWaxProcedure(e.target.value)}
              />
              Complete
              <button type="submit" onClick={handleUpdate}>
                Update
              </button>
            </form>
          </div>
          <button type="submit" onClick={handleClickDelete}>
            Delete
          </button>
        </article>
      )}
    </div>
  );
}

` Any ideas why the data won't update? I am new to this and spent a long time trying to find an answer.

CodePudding user response：

Did you console log the response you're getting when making the request? Are you calling the fetch function again after calling 'handleUpdate'?

CodePudding user response：

remove "onsubmit" from form tag and remove type="submit" from both buttons