Untitled

import React, { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom';
import EmployeeService from '../services/EmployeeService';

function UpdateEmployeeComponent() {
    const [employee, setEmployee] = useState([]);
    let { id } = useParams();
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const navigate = useNavigate();
    
    useEffect(() => {
        EmployeeService.getEmployeesById(id).then(response => {setEmployee(response.data)})
        setFirstName(employee.firstName)
        setLastName(employee.lastName)
        setEmail(employee.email)
    },[id,employee.firstName, employee.lastName, employee.email])

    console.log(employee)
    console.log(firstName + " " + lastName + " " + email)

    const handleFirstNameChange = (e) => {
        setFirstName(e.target.value);
    }

    const handleLastNameChange = (e) => {
        setLastName(e.target.value);
    }

    const handleEmailChange = (e) => {
        setEmail(e.target.value);
    }

    const updateEmployee = (e) => {
        e.preventDefault();
        console.log('employee =>' + JSON.stringify(employee));

        //EmployeeService.addEmployee(employee).then(res =>{
        //    navigate('/employees');
        //})
    }

    function cancel() {
        navigate('/employees')
    }

    return (
        <div>
            <div className="container mt-2">
                <div className="row">
                    <div className="card col-md-6 offset-md-3 offset-md-3">
                        <h3 className="text-center">Update Employee {id}</h3>
                        <div className="card-body">
                            <form action="">
                                <div className="form-group mb-1">
                                    <label>First Name:</label>
                                    <input placeholder='First Name' name="firstName" className='form-control'
                                            value={firstName} onChange={handleFirstNameChange}/>
                                </div>
                                <div className="form-group mb-1">
                                    <label>Last Name:</label>
                                    <input placeholder='Last Name' name="lastName" className='form-control'
                                            value={lastName} onChange={handleLastNameChange}/>
                                </div>
                                <div className="form-group mb-3">
                                    <label>Email:</label>
                                    <input placeholder='Email' name="email" className='form-control'
                                            value={email} onChange={handleEmailChange}/>
                                </div>
                                <button className="btn btn-success" onClick={updateEmployee}>Save</button>
                                <button className="btn btn-danger" 
                                onClick={cancel} style={{marginLeft: "10px"}}>Cancel</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default UpdateEmployeeComponent;