//javascript // Manage state const [employee, setEmployee] = useState( { id: "", firstName: "", lastName: "", emailId: "" } ); //function to insert value in state const handleChange = (e) => { const value = e.target.value; setEmployee({ ...employee, [e.target.name]: value }); }; //call api to save const saveEmployee = (e) => { // e.preventDefault(); EmployeeService.saveEmployee(employee).then((response) => { console.log(response); }).catch((err) => { console.log(err); }) }; =================>JSX {/* For Email */} <div className='items-center justify-center h-14 w-full my-4'> <label className='block text-grey-600 text-sm fornt-normal'>Email</label> <input type="text" className='h-10 w-96 border mt-2 px-2 py-2' name="emailId" value={employee.emailId} onChange={(e) => handleChange(e)} ></input> </div> {/* For Button */} <div className='items-center justify-center h-14 w-full my-8'> <button onClick={saveEmployee} className='rounded'>Save</button> <button className='rounded'>Clear</button> </div> =================>Calling api class import axios from "axios"; const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/v1/employees"; class EmployeeService { //post api(save) saveEmployee(employee) { return axios.post(EMPLOYEE_API_BASE_URL, employee); }; } export default new EmployeeService();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter