Untitled

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

function AddEmployeeComponent() {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const navigate = useNavigate();

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

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

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

    const saveEmployee = (e) => {
        e.preventDefault();
        let employee = {firstName: firstName, lastName: lastName, email: email};
        console.log('employee =>' + JSON.stringify(employee));

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

    const cancel = () => {
        navigate('/employees')
    }

    useEffect(() => {
        let isMounted = true; 
        if (isMounted) console.log(firstName + " " + lastName + " " + email);

        return () => { isMounted = false };
        
    }, [firstName, lastName, email])

    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">Add Employee</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={saveEmployee}>Save</button>
                                <button className="btn btn-danger" onClick={cancel} style={{marginLeft: "10px"}}>Cancel</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default AddEmployeeComponent;