React Last input change is not saved in sessionStorage when refresh or changing page like goBack or Link

I’m trying to save the values of my <from> in sessionStorage so that if the user goes to another page of the website, for instance by clicking on the link to create a new ‘Author’, when the user goes back to the <from> all the values are still there.

But, if I click on a link after putting some values on my <TextField> input, every last input of every field is not there when I come back to my form.

eg. I write hello on my input if I refresh i have hell

Hope it’s clear, and someone can enlighten me on what I’m missing, it would be great. Bellow an extract of my code.

const initialValues = {
  title: '',
  //... and other stuff
}

export default function BookForm() {

  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    if (event.target.value) {
      setValues({...values, [event.target.name]: event.target.value})
      sessionStorage.setItem('values', JSON.stringify(values))
    }
    else {
      setValues({...values, [prop]: initialValues[prop]})
      sessionStorage.setItem('values', JSON.stringify(values))
    }
  };

  useEffect(() => {
    if(!isLoaded) {
      loadAutocomplete()
    }
    if (sessionStorage.getItem('values')){
      setValues(JSON.parse(sessionStorage.getItem('values')))
    }
  }, [isLoaded])

}

return (
    <form className={classes.root} onSubmit={sendForm}>
      <Grid container>
        <Grid item xs={12}>

          {/*TITRE OK*/}
          <LineForm>
            <TextField
              fullWidth
              name={"title"}
              id="book-title"
              label="TITRE"
              required
              value={values.title}
              onChange={handleChange}
              InputLabelProps={{
                shrink: true,
              }}
            />
          </LineForm>

// ...


EDIT:

let formValues = {...values, [event.target.name]: event.target.value}
    if (event.target.value) {
      setValues(formValues)
      sessionStorage.setItem('values', JSON.stringify(formValues))
    }

this seems to work

Answer

Your problem is that when you a setState function is executed, the values of the state don’t update immediately, in your case when you do that:

      setValues({...values, [event.target.name]: event.target.value})
      sessionStorage.setItem('values', JSON.stringify(values))

you set in the session storage the variable values but it isn’t the most updated one.

Just save the value you send to setValues and use that to update the Session Storage.

EDIT:

how it would look:

 const handleChange = (event) => {
    if (event.target.value) {
      const newValues = {...values, [event.target.name]: event.target.value};

      setValues(newValues)
      sessionStorage.setItem('values', JSON.stringify(newValues))
    }
    else {
      setValues({...values, [prop]: initialValues[prop]})
      sessionStorage.setItem('values', JSON.stringify(values))
    }
  };