inertia: FormHelper transform not working

Versions:

@inertiajs/inertia version: 0.11.0
@inertiajs/inertia-react version: 0.8.0

Describe the problem:

The transform function of the form helper does not work.

Steps to reproduce:

const { data, setData, transform, post } = useForm({
        status: 'default',
        foo: 'bar',
    })

function handleDraft(event) {
        event.preventDefault()
        transform(data => ({ ...data, status: 'draft' }))
        post('/test')
 }

function handleSave(event) {
        event.preventDefault()
        transform(data => ({ ...data, status: 'open' }))
        post('/test')
}

Route::post('/test', function (Request $request) {
    return dd($request->all());
});

In both cases (handleSave or handleDraft called) the result from the laravel controller is:

^ array:2 [[▼]()
  "status" => "default"
  "foo" => "bar"
]

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 21 (1 by maintainers)

Links to this issue

React inside Rails App : rails

Most upvoted comments

for now i use alternatif way,

const [data, setData, reset] = useForm();
.
.
.
Inertia.post('url', {...data, custom_field: custom_value})

muh-hizbe on Apr 1, 2022

I thought I might offer a solution for those searching for something quick. I built my form solution to be reusable, and published it to npm to make things easier for me. It includes a re-work of useForm which fixes the transform issue and can be used as a direct drop-in for the original hook. It does a few other things, but if you just need a fix for this issue, it might be of use. You can find it here: https://github.com/aviemet/useInertiaForm

Please feel free to use it, copy it, steal it, improve it, etc.

aviemet on May 21, 2023

Due to the way the bug is introduced, there unfortunately isn’t any way to circumvent it and still have the benefits of the useForm methods. My only suggestions are to import of the fixed versions that have come out of this 2 year long bug fix request. One is my own and another was created by a commenter on the open PR fix for this bug.

I created a package which fixes this issue and also adds support for nested form data. If you want to use the nested data solution, or don’t mind the slightly larger import size, that could be useful for you.

Another person left a comment that they created a new npm package from a fork of Inertia where the only change is properly memoizing the transform method (which fixes the bug).

aviemet on Mar 12, 2024

Why is the issue not being resolved? It’s been eight months!

You have a PR #1171. Why is not merged?

den1n on Oct 14, 2022