import React,{useState,useEffect} from 'react'; import { Button, Form } from 'semantic-ui-react'; import axios from 'axios'; import {useNavigate} from 'react-router'; import usePrevious from './prev'; import {Link} from 'react-router-dom'; const Update = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [checkbox, setCheckBox] = useState(false); const [id, setID] = useState(null); let navigate = useNavigate();

Aquí estoy almacenando el valor anterior del campo de entrada usando otro componente para obtener el valor anterior

 const previous = usePrevious(firstName); useEffect(() => { setID(localStorage.getItem('ID')); setFirstName(localStorage.getItem('First Name')); setLastName(localStorage.getItem('Last Name')); setCheckBox(localStorage.getItem('Checkbox Value')) }, []);

Aquí es donde se envían los datos actualizados a la API simulada y, en caso afirmativo, estoy comparando el valor anterior con el nuevo (si cambia).

 const updateApiData = () => { axios.put(`https://61cb2af8194ffe0017788c01.mockapi.io/fakeData/${id}`,{ firstName, lastName, checkbox }).then(()=>{ navigate('/read'); }) if(firstName==previous){ console.log("change"); } } return( <div> <Form> <Form.Field> <label>First Name</label> <input id="i1" placeholder='First Name' value={firstName} onChange={(e)=>setFirstName(e.target.value)} /> </Form.Field> <Form.Field> <label>Last Name</label> <input placeholder='Last Name' value={lastName} onChange={(e)=>setLastName(e.target.value)} /> </Form.Field>

aquí, al hacer clic en el botón, estoy llamando a la función de envío de datos a la API. Necesito verificar aquí si al hacer clic en actualizar el valor del campo es el mismo que el anterior.

 <Button type='submit' onClick={updateApiData}>Update</Button> <Link to="/read"> <Button>Cancel</Button> </Link> </Form> <br></br> <Button onClick={()=>navigate(-1)}>Go Back</Button> </div> ) } export default Update;