updatePost component

[k1mo55]

in the client part of this project at the updatePost component inside the handleSubmit function in the fetch url change the formData._id to postId because the formData._id is always undefined

[IAMAmanRaj]

formData is referring to data.posts[0] and formData._id should correctly refer to the _id of the Post Model Data , so passing it should correctly point to the post which we want to update. Try console logging the value of formData._id

[k1mo55]

i did console log but still undefined so i used postId instead since it has the same value

[novawar]

i did console log but still undefined so i used postId instead since it has the same value

Using postID to replace may not solve the entire problem because the state of formData still has issues.

When you console.log(JSON.stringify(formData)), you'll see three sets of data on the UpdatePost page. Let me explain why.

The fact that you're seeing data in the console three times is due to the fetchPost() call inside useEffect(), which you invoke initially. This is triggered when the component is first called and when the postID changes.

The changing postID is one reason useEffect() is called, and fetchPost() is called when the postID changes, causing the post data to be reloaded when there's a change.

The first set, {}, is normal and empty because formData is initially set to an empty object ({}).

The second set is the data loaded when the postID changes. This data shows all information, including _id, because it's set to formData when the post is initially loaded.

The third set is similar to the second, but it doesn't include _id because you've updated setFormData to exclude _id in fetchPost(). You only want to update some parts of the post data. In this case, you might need to adjust how setFormData is set to ensure _id is included.

You don't need to switch to using postID if you make changes to setFormData according to my suggestions.

To fix it, update handleUploadImage as follows:

() => {
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
        setImageUploadProgress(null);
        setImageUploadError(null);
        setFormData((prevFormData) => ({
            ...prevFormData,
            image: downloadURL
        }));
    });
});

Use a state-setting function that takes prevFormData and returns the new combined data. This ensures all data in formData remains intact.

Similarly, you should do the same with the remaining onChange for content and category.

// Title
onChange={(event) => setFormData((prevFormData) => ({
  ...prevFormData,
  title: event.target.value,
}))}

I've given an example for one part only, so you'll need to make similar adjustments for content, category, etc.

If you don't use prevFormData, you'll encounter another problem. This occurs when you fill in all fields but upload an image later. The image upload will reset the remaining formData state, preventing you from updating and showing an error for required inputs.

Enjoy coding!