Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

116
Vistas
problem in multi step form with formik in react with nested objects

Hi all I have following code

It is simple form that I founded in internet, after all steps when I submitting the form in console I can see the following data:

   {
     "firstName": "asas",
     "lastName": "wdw",
     "address1": "asasas",
     "city": "1",
     "zipcode": "11111",
     "country": "222",
     "useAddressForPaymentDetails": false,
     "nameOnCard": "AAA",
     "cardNumber": "111123456",
     "expiryDate": "2027-09-26T08:51:30.737Z",
     "cvv": "123",
     } 

But I want to transfer it in nested object as you see in below. I want create payment object for payment step


   {
     "firstName": "asas",
     "lastName": "wdw",
     "address1": "asasas",
     "city": "1",
     "zipcode": "11111",
     "country": "222",
     "useAddressForPaymentDetails": false,
      payment:{
        "nameOnCard": "AAA",
        "cardNumber": "111123456",
        "expiryDate": "2027-09-26T08:51:30.737Z",
        "cvv": "123",
       },
     } 

I already change somethings in project to get that result:

initialValues:

   const {
      formField: {
        firstName,
        lastName,
        address1,
        city,
        zipcode,
        country,
        useAddressForPaymentDetails,
        payment,
      }
    } = checkoutFormModel;

    export default {
       [firstName.name]: "",
       [lastName.name]: "",
       [address1.name]: "",

      [payment.nameOnCard.name]: "",
      [payment.cardNumber.name]: "",
      [payment.expiryDate.name]: "",
      [payment.cvv.name]: ""
};

checkoutModel:

   export default {
     formId: "checkoutForm",
     formField: {
       payment: {
         nameOnCard: {
         name: "nameOnCard",
         label: "Name on card*",
       },
        cardNumber: {
        name: "cardNumber",
        label: "Card number*",
       }
    ...
   }

But it's not working .... Please help me to fixed that in code...sorry I can only give link to that code.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda