Tenemos el siguiente formulario.

 const MyForm = ({ myFormRef, }) => ( <form id="myForm" ref={myFormRef} method="POST"> <input name="request_token" type="hidden" /> <input name="id" type="hidden" /> <input name="versionId" type="hidden" /> <input name="additionalId" type="hidden" /> </form> ); export default MyForm;

Estamos usando useRef hook para hacer referencia a este formulario y llamarlo dentro de otro Componente de la siguiente manera.

 const myFormRef = useRef(); <MyForm myFormRef={myFormRef} />

La función postData al final está en un archivo js.
La pregunta es sobre esta función postData .
Esto se activa cuando se envía un formulario haciendo clic en un botón.

Todo funciona bien cuando capturo los detalles correctos y puedo enviar el formulario.

La cuestión:

Es el formato de cómo estoy enviando los datos sobre el cual está el problema.

Estoy enviando más detalles en el siguiente formato en este formulario.

 { token, id, versionId, additionalId }

En cambio, quiero enviarlo como:

 { token, overallData: { id, versionId, additionalId } }

¿Cómo puedo modificar el formato de la solicitud para que se ajuste dentro de los datos generales para los 3 campos (el token aún está afuera) antes de enviarlo?

 export const postData = ( myFormRef, token, myLink, id, versionId, additionalId ) => { const fields = { request_token: token, id, versionId, additionalId, }; // checking if data exists for a key (example id or token) and remove if no value against the key. [...myFormRef.current.children].forEach((child) => { child.value = fields[child.name]; if (!child.value) { myFormRef.current.removeChild(child); } }); // then submit myFormRef.current.action = myLink; myFormRef.current.submit(); };

Nota: tengo que apegarme a este estilo para usar el formulario y useRef() debido a otras dependencias.

Por lo tanto, buscando una forma de modificar posiblemente postData. De lo contrario aconsejar otras opciones. Gracias.