PUT method is not working in front end but works in Postman

Question

Please, help me. I am doing PERN stack app, and I can't understand why my PUT method is not working in front end but works in Postman perfectly. When I add a todo - "drink water" for example, in database id appears as should "drink water" and in fron end as well it appears, but when I edit that todo in front end it's null in database and front end as well, looks like that: description {id: 56, todo: null} Here is a code of EditTodo.js:

export default function EditTodo({ todo }) {
  const [description, setDescription] = useState(todo);
  console.log("todos", todo);
  console.log("description", description);
  //   Edit function
  const editText = async (id) => {
    try {
      const body = { description };
      const response = await fetch(`http://localhost:5000/todos/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      console.log("response", response);
      window.location = "/";
    } catch (error) {
      console.error(error.message);
    }
  };
  return (
    <Fragment>
      <button
        type="button"
        className="btn btn-warning"
        data-toggle="modal"
        data-target="#myModal"
      >
        Edit
      </button>

      <div className="modal" id="myModal">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">Edit Todo</h4>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
              ></button>
            </div>

            <div className="modal-body">
              <input
                type="text"
                className="form-control"
                value={description.todo}
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>

            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-warning"
                data-dismiss="modal"
                onClick={() => editText(todo.id)}
              >
                Edit
              </button>
              <button
                type="button"
                className="btn btn-danger"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

Looks like EditText function is not executed when I edit the todo. Thanks in advance.

Answer 1

Where do you set the todo ? A put request replaces the current values with new ones. If you only set the description property but leave the todo out, it will overwrite it with an empty string, clearing any data you had in there. Either set the old value of the todo before making your put request or use a patch instead. A patch only affect certain selected values instead of everything. Anyway, it's still very possible to do this with a put instead.

Try creating a useEffect where you set your todo to state.

Something like this:

    const todoVar = description.find((desc)=> desc.id === todo.id);
    
    useEffect(()=>{
      if(todoVar){
        setDescription(description.todo)
      }
    },[todoVar, setDescription])

Basically, you want to set the todo value from your database to it's original value before making your PUT request. This way it won't be empty/null.