Merge data on form submission

[agustinzamar]

Consider you have a page to create a new post. You have 2 buttons: "Create draft" and "Publish". Based on which button is pressed you need to submit the form with the post data but one field "status" must be different.

<Button onClick={() => handleSubmit('draft')}>
  Create draft
</Button>
<Button onClick={() => handleSubmit('published')}>
  Publish post
</Button>

On the handleSubmit function you could do

  function handleSubmit(status) {
    form.post(route('posts.store'), {
      data: {
        status,
      },
    })
  }

and status would be appended to the request payload when submitted. Currently this is ommited and only the data present on the form is submitted

[jefhar]

@agustinzamar You would probably want to use the `transform() method on the form helper to add the status field instead.

[agustinzamar]

Correct me if I'm wrong but the only approach I can think of is something like this

1. A state variable const [status, setStatus] = useState(null)
2. The button "onClick" sets the corresponding status

<Button onClick={() => setStatus('draft')}>
  Create draft
</Button>
<Button onClick={() => setStatus('published')}>
  Publish post
</Button>

3. An useEffect() to detect a change in status that does the form.post part

useEffect(()=> {
  router.post(route('posts.store'))
}, [status])

4. Then in the transform set the status field

form.transform(data => ({
  ...data,
  status,
}))

If that is the only way, which is how I currently handle this, I still believe my proposal would be a cleaner way