Reload page after submit

[rolinbos]

I've implemented this package for working with nested data within Laravel. But when I do a submit of the form the page will do a full reload. When I change the form to use the default Inertia form then it will not do a full reload of the page. This is the submit function:

    function onSubmit(e: React.FormEvent) {
        e.preventDefault();

        form.submit('post', route('teams.store'));
    }    

I was wondering how this can be solved that it doesn't do a reload of the page. Or is this something that's not implemented inside this package?

[aviemet]

Interesting that this isn't working for you, it works for me the same way as is written in the Inertia.js docs for their original hook. I just tested the following:

import { useInertiaForm } from 'use-inertia-form'

const Page = () => {
  const { getData, setData, errors, post } = useInertiaForm({
    data: { key: value }
  })

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    form.post('/')
  }

  return (
    <form onSubmit={ handleSubmit }>
      <input name="data.key" value={ getData("data.key") } onChange={ value => setData("data.key", value) } />
      <input type="submit" value="Submit" />
    </form>
  )
}

This properly sent the data to the backend, and also didn't reload the page. Perhaps you could provide some code I could use to reproduce the issue you're experiencing?

[rolinbos]

Thanks for your reply. Is it possible that it is because I created the form as follows:

const form = useInertiaForm <Team>({...team});

I don't create it like you do in your example code (const { getData, setData, errors, post } = useInertiaForm). That is the only difference I can see in my code.

[aviemet]

That shouldn't cause the issues you're describing, but that pattern does do some unnecessary work. The hook infers the type of the object you pass it, so if team is properly typed as a Team type, you don't need to state it explicitly. Under the hood, it also already clones the passed object using structuredClone, so spreading the object back into an object as a clone shorthand isn't needed.

Anyway, I can venture a guess that there might be an error somewhere else on the page which halts javascript and so we never get to e.preventDefault(). Without being able to reproduce the issue though, I can only make guesses. Would you be willing to setup a codesandbox example, or share a project I can clone which has this error?