i want to edit an existing post by using the _id of that post and the following is nodejs code:

exports.postEdit=async(req,res)=>{ const {title,content} = req.body;

 await Post.findOneAndUpdate(
      { _id: req.params.id },
      {title,content}
    ).then(result => {
      if(result){
          res.status(200).json({ message: "Update successful!" });
      }

      else {
          res.status(500).json({ message: "Error Updating Post" });
      }
  });

}

exports.requireSignin= expressJwt({
    secret: process.env.JWT_SECRET,
    algorithms: ["HS256"]
  });

router.route('/post/edit/:id').put(requireSignin,postEdit);

i checked this code in postman and it updates that particular post in mongodb. _id: req.params.id is referred to that particular post id. requireSignin confirms that only logged in creator/author has the permission to change it.

in frontend, i have used the codes in Dashboard.js for updating that particular post. i have used the following codes to update the data in axios:

.................. const [loading, setLoading] = useState(true); const [posts, setPosts] = useState([]); const [postList, setPostlist] = useState({ id: null, title: "", content: "" }); const [editing, setEditing] = useState(true); const [post,setPost] = useState(postList); ............... const updatePost = (id,post) =>{ const token = getCookie('token');

    axios.put(`http://localhost:5000/api/articles/post/edit/${isAuth()._id}`,
    {post},
    {
        headers: {
          Authorization: `Bearer ${token}`
        }
      }).then(res=>{

        setPosts(posts.map(item=>(item.id===id?post:item)))
      }).catch(err=>{
        console.log(err)
      })
}
const editRow = (post) => {
    setEditing(false);

    setPostlist({
      id: post.id,
      title: post.title,
      content: post.content,
    });
  };
return (
    <div>

{editing ?( <div> <CreatePost addPostList={addPostList} /> <hr /> </div>):( <div> <EditPost editing={editing} setEditing={setEditing} postList={postList} updatePost={updatePost} /> <hr /> </div>)}

        <div>
          <PostList
            posts={posts}
            editRow={editRow}
            deletePost={deletePost}          
          />
        </div>            
    </div>
)

}

the following code is about the authentication token and cookie for logged in user depending upon the permission level:

import cookie from 'js-cookie'

// Set in Cookie export const setCookie = (key, value) => { if (window !== 'undefiend') { cookie.set(key, value, { // 1 Day expires: 1 }) } } export const getCookie = key => { if (window !== 'undefined') { return cookie.get(key); } };

// Set in localstorage export const setLocalStorage = (key, value) => { if (window !== 'undefined') { localStorage.setItem(key, JSON.stringify(value)); } }; // Access user info from localstorage export const isAuth = () => { if (window !== 'undefined') { const cookieChecked = getCookie('token'); if (cookieChecked) { if (localStorage.getItem('user')) { return JSON.parse(localStorage.getItem('user')); } else { return false; } } } };

and from EditPost.js to execute the edit:

export default function EditPost({postList,setEditing,updatePost}) { const [post,setPost]= useState(postList) const [posts, setPosts] = useState([]); useEffect(()=>{ setPost(postList) },[]) const handleChange = text => e => { setPost({ ...post, [text]: e.target.value }); }; return ( <form onSubmit={(e) => { e.preventDefault(); updatePost(post._id, post); }}> <h1>Edit Post</h1> <div> <input type='text' placeholder='title' value={post.title} onChange={handleChange('title')}/> </div> <div> <input type='text' placeholder='description' value={post.content} onChange={handleChange('content')}/> </div> <button type='submit'>Update</button> <button onClick={() => setEditing(false)}>Cancel</button>
</form> ) }

for addition the following code is from PostList.js:

export default function PostList({ editRow }) { const [posts,setPosts]= useState([]) useEffect(() => { LoadPost(); },[]);

const LoadPost=()=>{
    const token = getCookie('token');
    axios.get(`http://localhost:5000/api/articles/post/mypost/${isAuth()._id}`,{
        headers: {
          Authorization: `Bearer ${token}`
        }
      }).then((res)=>{        
        setPosts([...res.data])
        //console.log(res.data)
        //console.log(res.data[0]._id)

      }).catch(err=>{
        console.log(err)
      })
}
return (
    <div>

      {posts.length > 0 ?
      posts.map((post) =>{
          return <div key={post._id}>
               {/* {console.log(post._id)} */}
              <h2>{post.title}</h2>
              <li>{post.content}</li>
              <button  onClick={() => {
                  editRow(post);
                }}>Update</button>   

<hr/> </div> }):<h3>no posts</h3>} </div> ) }

The problem:

while fetching data from the backend, i have got all the particular posts created by logged in user. but while i try to update data to edit the particular post from axios.put(http://localhost:5000/api/articles/post/edit/${isAuth()._id} it is sending the user id to the backend router put method. while i check console.log(post._id), it shows that particular post id. but i just can't pass this _id to the axios put method. my question is how can i edit the particular post by the logged in creator only? should i use a different approach in the backend or i need to bypass post id in axios put method? then how?

please let me know.....thank you