React CRUD with JSON server and local storage

import React, { useState, useEffect } from 'react'; // Import necessary hooks from React
import axios from 'axios'; // Import axios for making HTTP requests
import { useParams, useNavigate } from 'react-router-dom'; // Import useParams and useNavigate for navigation and params

const UpdateEmployee = () => {
  const { id } = useParams(); // Get the employee ID from the URL parameters
  const [employee, setEmployee] = useState({ firstName: '', lastName: '', email: '' }); // State to hold the employee data
  const navigate = useNavigate(); // Initialize useNavigate for navigation

  // useEffect hook to fetch employee data from the server when the component mounts
  useEffect(() => {
    axios.get(`http://localhost:5000/employees/${id}`) // Make GET request to fetch employee
      .then(response => {
        setEmployee(response.data); // Set the employee state with the fetched data
      })
      .catch(error => console.log(error)); // Log any error
  }, [id]); // Dependency array with id means this effect runs when the id changes

  // Handle change in input fields
  const handleChange = (e) => {
    const { name, value } = e.target;
    setEmployee({ ...employee, [name]: value });
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    axios.put(`http://localhost:5000/employees/${id}`, employee) // Make PUT request to update employee
      .then(response => {
        navigate('/'); // Navigate back to the employee list after updating
      })
      .catch(error => console.log(error)); // Log any error
  };

  return (
    <div className="update-employee">
      <h2>Update Employee</h2>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>First Name</label>
          <input type="text" name="firstName" value={employee.firstName} onChange={handleChange} required />
        </div>
        <div className="form-group">
          <label>Last Name</label>
          <input type="text" name="lastName" value={employee.lastName} onChange={handleChange} required />
        </div>
        <div className="form-group">
          <label>Email</label>
          <input type="email" name="email" value={employee.email} onChange={handleChange} required />
        </div>
        <button type="submit" className="btn btn-primary">Update</button>
      </form>
    </div>
  );
};

export default UpdateEmployee;