title: How to Edit a form in React by using functional components
body: <p>I am working on a React project, In my project I have a form, In that form I fetch data by Id </p>
  
  <p>From the backend, Now I am trying to do put method. But I have no idea how doing it so please me</p>
  
  <p>How to send edited data to backend using the put method.</p>
  
  <p>This is my code Editstudentdetails.js</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import './Editstudentdetails.css';
  import axios from 'axios';
  import { withRouter } from 'react-router-dom'
  
  function Editstudentdetails(props) {
      const [getStudentDataById, setStudentDataById] = useState([])
  
      const [editStudentDataById, latestEdit] = useState({ name:'', position: '', location: '', salary: '', email: '', password: '' })
  
      const id = props.match.params.id
      console.log(id)
  
  
  
      useEffect(() =&gt; {
          const getDataById = async () =&gt; {
              try {
                  const result = await axios.get(`http://localhost:7500/api/registration/${id}`)
                  setStudentDataById(result.data)
                  console.log(result.data)
              } catch (error) {
                  console.log(error)
              }
          }
          getDataById()
      }, [])
  
  
      const handleChange = ({ target }) =&gt; {
          const { name, value } = target
  
          const newData = Object.assign({}, getStudentDataById, { [name]: value });
          setStudentDataById(newData);
  
          const latestData = Object.assign({}, editStudentDataById, { [name]: value })
          latestEdit(latestData)
      }
  
      const handleSubmit = async e =&gt; {
          e.preventDefault();
          console.warn(editStudentDataById)
          const editDataById = async () =&gt; {
              try {
                  const response = await axios.put(`http://http://localhost:7500/api/registration/${id}`, editStudentDataById)
                  latestEdit(response.data)
                  console.warn(response.data)
              } catch (error) {
                  console.warn(error)
              }
          }
          editDataById()
      }
      return (
          &lt;div className='container'&gt;
              &lt;div className='row'&gt;
                  &lt;div className='col-4'&gt;
                      &lt;form onSubmit={handleSubmit}&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
                              &lt;input type="text" name='name' value={getStudentDataById.name} onChange={handleChange} className="form-control" id="name"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="position"&gt;Position&lt;/label&gt;
                              &lt;input type="text" name='position' value={getStudentDataById.position} onChange={handleChange} className="form-control" id="position"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="location"&gt;Location&lt;/label&gt;
                              &lt;input type="text" name='location' value={getStudentDataById.location} onChange={handleChange} className="form-control" id="location"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="salary"&gt;Salary&lt;/label&gt;
                              &lt;input type="number" name='salary' value={getStudentDataById.salary} onChange={handleChange} className="form-control" id="salary"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
                              &lt;input type="email" name='email' onChange={handleChange} value={getStudentDataById.email} className="form-control" id="email"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                              &lt;input type="password" name='password' onChange={handleChange} value={getStudentDataById.password} className="form-control" id="password"&gt;&lt;/input&gt;
                          &lt;/div&gt;
                          &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  
  export default withRouter(Editstudentdetails)
  
  </code></pre>
  
  <p>If you feel I am not clear with my doubt please put a comment Thank you</p>