I was wondering because it is part of the old [pages router documentation](https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations), but it seems like a cleaner and easier way than other approaches (for app router) that I've found online.

I have multiple buttons with the action value being passed to the function

<div className="px-4">
    <button type="button" onClick={() => fireEvent('shipped')}>
        Mark as Shipped
    </button>
    <button type="button" onClick={() => fireEvent('preparing')}>
        Mark as Preparing
    </button>
    <button type="button" onClick={() => fireEvent('canceled')}>
        Cancel Order
    </button>
</div>

And this is the function that handles the value and submit it to the API:

async function fireEvent(eventName: string) {
 
    const response = await fetch('/api/extranet/events/submit', {
      method: 'POST',
      body: JSON.stringify({
        eventName: eventName,
      }),
    })
 
    // Handle response if necessary
    const data = await response.json()
    
    console.log(data)
}