Tengo un formulario en el que toda la funcionalidad funciona bien de forma independiente, según el propósito del diseño, obtuve la tarea de tener todos los cambios en el formulario y guardar la funcionalidad del formulario en acciones de contexto. Como ese formulario se usa en muchos lugares, para la funcionalidad común necesitamos agregar el código en acciones de contexto.

A continuación se muestra el fragmento de código de mi formulario existente donde no puedo compartir el código completo:

 const { state, actionsCollection } = useContext(StateContext); const [cardholder, setcardholder] = useState(state.creditCard.cardholder); const [cardnumber, setcardnumber] = useState(state.creditCard.cardnumber); const [errors, setErrors] = useState({ cardholder: false, cardnumber: false }); const onChange = (e) => { switch (e.target.name) { case "cardholder": setcardholder(e.target.value); var cardholderName = /^[a-zA-Z\u00C0-\u00FF\s*$]{1,50}$/.test(e.target.value); if (e.target.value === "") { setcardholder(e.target.value); } if (cardholderName === true) { setcardholder(e.target.value); setErrors({ ...errors, cardholder: false }); } break; ........ code continues }

Aquí necesito mover este código onchange a la acción contextual onChangeCreditCardFields():

 const onChange = (e) => { actionsCollection.booking.onChangeCreditCardFields() }

onchange se activa pero obtiene errores como:

 setErrors not defined setcardholder not defined .....

Como no puedo definir usestate en acciones.

¿Cómo migrar mi código onchange con esta funcionalidad?