Normally, when I have a form, I would react to the onSubmit handler
<form onSubmit={e => { ... } }>
<input ... />
<input ... />
<button type="submit">Save</button>
</form>
This pattern also plays well with e.g. formik, that has an onSubmit event handler - and if I place a <button type="submit"> in the form, the formik event handler will be triggered.
However, I am now in a situtation where one of two things should happen, and the UI right now is to have two different submit buttons. (Is this a bad pattern?)
My thought was to put a value on the button, but I cannot figure out how to read the value from the event handler
<form onSubmit={e => {
// how do I figure out which button was pressed
const type = e. ???
}}>
<input ... />
<input ... />
<button type="submit" name="type" value="DO_THIS">Do This!</button>
<button type="submit" name="type" value="DO_THAT">Do That!</button>
</form>
My solution right now is to have individual onClick handlers on the buttons, which works - but it annoys me.