'why PUT request is sending NULL value to sql database

when i click on EDIT button to send the form data ,insted of displaying the editted text ,it displays blank field and NULL is send to the database. i have correctly used

app.use(express.json());
app.use(express.urlencoded({extended: true}));

this problem is only there for PUT request.POST is working fine. Can anyone please help me ?

i am using PERN stack and have made a restful API .this is the route for Updating a field:

    app.put('/placements/announcements/:id',async(req,res)=>{
        try{
         const {id}=req.params;
         const {editPost,title}=req.body;
         const updatePost= await pool.query("update announcements set an_desc=$1,an_title=$2 where an_id=$3 returning *",[editPost,title,id]);
         res.json("updated");
        }catch(err){
            console.error(err.message);
        }
    });

here is the form:

    <Modal
                       size="lg"
                       show={lgShow}
                       onHide={() => setLgShow(false)}
                       aria-labelledby="example-modal-sizes-title-lg"
                       id={`id${p.an_id}`}
                     >
                       <Modal.Header closeButton>
                         <Modal.Title id="example-modal-sizes-title-lg">
                           {p.an_title}
                         </Modal.Title>
                       </Modal.Header>
                       <Modal.Body>
                        <form onSubmit={updatePost}>
                         <div className="form-group">
                             
                             <textarea className="form-control" 
                                       id="exampleFormControlTextarea1" 
                                       rows="3"
                                       value={editPost}
                                       onChange={e=>setEditPost(e.target.value)}
                                       name="editPost"
                                       >
                             </textarea>
                             <input type="text" value={title} onChange={e=>setTitle(e.target.value)} />
                            
                             <button type="submit" value="Submit" className="btn btn-primary mt-2 float-end ">
                                    
                               Edit
                             </button>
                             
                          </div>
                         </form>
                       </Modal.Body>
                     </Modal>

                         <textarea className="form-control" 
                                   id="exampleFormControlTextarea1" 
                                   rows="3"
                                   value={editPost}
                                   onChange={e=>setEditPost(e.target.value)}
                                   name="editPost"
                                   >
                         </textarea>
                         <input type="text" value={title} onChange={e=>setTitle(e.target.value)} />
                        
                         <button type="submit" value="Submit" className="btn btn-primary mt-2 float-end ">
                                
                           Edit
                         </button>
                         
                      </div>
                     </form>
                   </Modal.Body>
                 </Modal>

and this is the update function:

    const EditPost=({p,category})=>{
    
      const [lgShow, setLgShow] = useState(false);
      const [editPost,setEditPost]= useState(p.an_desc);
      const [title,setTitle]=useState(p.an_title);
    
      const updatePost= async e=>{
        e.preventDefault();
        try{
          const body={editPost,title};
          const response= await fetch(`http://localhost:5000/${category}/announcements/${p.an_id}`,{
            method:"PUT",
            header:{"Content-Type":"application/json"},
            body: JSON.stringify(body)
          })
          window.location=`${category}`;
          console.log("updated");
        }catch(err){
          console.error(err.message);
        }
      }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source