How to submit and modify data in a table?

Question

JavaScript

import React, { useEffect,useState} from 'react';
import axios from 'axios';
export function AllPlayers () {
  
  const [players,setPlayers]=useState([])
  const [name,setName]= useState();
    const [surName,setSurName]=useState();
    const [gender,setGender]=useState();
    const[bornDate,setBorn]=useState();
  useEffect(()=>{
    getPlayers();
  })
  async function getPlayers() { 
    if(players.length<1)
    {
    const response = await fetch('api/player/all');
    const data = await response.json();
    setPlayers(data);
    }
  }  
  
  function Save(e){
  
    const body ={
      id:e.id,
        name:e.name,
        surName:e.surName,
        gender:e.gender,
        bornDate:e.bornDate
    }   
    axios.put('api/player/edit',body)
    .then(function(response)
    {
        console.log(response)
    })
    
}
  return (

      <table className='table table-striped' aria-labelledby="tabelLabel">
        
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Gender  </th>
            <th>Born</th>
            <th>Team</th>
            <th>Country</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          
          {players.map(player =>
            <tr key={player.id}>
              <td> {player.id}</td>
              <td><input className="form-control" value={player.name} /></td>
              <td><input className="form-control" value={player.surName}/></td>
              <td><input className="form-control" value={player.gender} /></td>
              <td><input className="form-control" value={player.bornDate}/></td>
              <td>{player.teamDTO.title}</td>
              <td>{player.teamDTO.country}</td>
              <td><button className="btn btn-primary" onClick={(e)=>Save(e)}>Save</button></td>
            </tr>
          )}
        </tbody>
      </table>
    
    );
  

 
}