React state update input data - reactjs

Question

I have developed react application, with router which has 2 routes. In one Page I am displaying the value, in the other page I have one form which has two input fields(Email and Phone) and one button. I have Onchange event for each input field. as soon as I do changes in input field and without clicking on update button, if I go back to the first page the data is updating without submitting. But after refresh it will get back to original value.
Can you please help me out, How to avoid the updating data.
Thanks in advance.
Here is my code:
import NumberFormat from 'react-number-format'
import {
useForm,
Controller,
ErrorMessage,
} from 'react-hook-form/dist/react-hook-form.ie11'
import isValidEmailAddress from '../utility/isValidEmailAddress'
import Messages from './Messages'
import Button from './Button'
import { useLocation } from 'react-router-dom'
export default function EditContactInformation({
changeContactInfoSmall,
contactInfo,
updateContactInfo,
}) {
const { handleSubmit, register, control, errors } = useForm()
return (
<form onSubmit={handleSubmit(() => changeContactInfo(contactInfo))}>
<h3>Edit contact information</h3>
<Messages results={contactInfo} />
<div className="edit-contact-information__form-col">
<div className="form-group form-group--email">
<label htmlFor="email">Preferred email address</label>
<input
name="email"
id="email"
type="text"
ref={register({
required: 'Please enter an email address',
validate: (value) =>
isValidEmailAddress(value) ||
'Please enter a valid email address',
})}
onChange={(e) => {
updateContactInfo('email', e.currentTarget.value)
return e.currentTarget.value
}}
defaultValue={contactInfo.get('email')}
/>
<ErrorMessage
errors={errors}
name="email"
as={<div className="form-errors" />}
/>
</div>
<div className="form-group form-group--phone">
<label htmlFor="phone">Preferred phone</label>
<Controller
as={<NumberFormat id="phone" format="(###) ###-####" mask="_" />}
name="phone"
rules={{
required: 'Please enter a phone number',
minLength: {
value: 10,
message: 'Please enter a valid phone number',
},
}}
onChangeName="onValueChange"
onChange={([{ value }]) => {
updateContactInfo('phone', value)
return value
}}
control={control}
defaultValue={contactInfo.get('phone')}
/>
<ErrorMessage
errors={errors}
name="phone"
as={<div className="form-errors" />}
/>
</div>
</div>
<div className="form-group">
<label>
<input
type="checkbox"
name="updateAll"
data-testid="update-all-button"
onChange={(e) => {
updateContactInfo('updateAll', e.currentTarget.checked)
}}
ref={register()}
/>{' '}
Update my contact information for all properties
</label>
</div>
<Button
className="button--primary"
arrow
type="submit"
isLoading={contactInfo.get('submitting')}
>
Update contact
</Button>
</form>
)
}
EditContactInformation.propTypes = {
changeContactInfo: PropTypes.func.isRequired,
contactInfo: PropTypes.object.isRequired,
updateContactInfo: PropTypes.func.isRequired,
}

Answer 1

you should use session storage for this situation. React states are deleted when the page is refreshed due to its nature. You should keep the information you want to keep session storage.

Answer 2

States in react are non persistent, meaning that data stored in state is purged when the site is refreshed or navigated out of. So, if you want to hold on to your data, depending on your need, you can either use cookies or your browser's local storage to persist.
react-persist is a great library that you can use to achieve this using localStorage.