React useReducer conditional dispatch

Question

I am trying to implement a "use company address" button that autofills the inputs if selected.

I get the pre-filled values as expected, however when I hit submit, the data for these fields are blank/didn't update.

My Code:

            <AdvancedInput
            name="street"
            type="text"
            value={useCompAddr ? companyAddress?.street : state.street}
            onChange={(e) =>
              dispatch({ field: "street", payload: e.target.value })
            }
          />

It does work when I click in each input field before submitting.

Any help is much appreciated

EDIT The fields in question look like so;

switch(action.payload) {
case "street":
... rest of fields
  return {
    ...state, [action.field]: action.payload
}
}

@BhaveshDaswani pretty standard resolver, see edit for details — adcanis, Jul 07 '22 at 16:49

score 0 · Accepted Answer · answered Jul 08 '22 at 01:11

In case anyone reads this. The issue was the state was not being set before the onChange was triggered.

    value={
useCompAddr ? (state.street = companyAddress?.street) : state.street } onChange={(e) => dispatch({ field: "street", payload: e.target.value }) }

was the solution.

React useReducer conditional dispatch

1 Answers1