How to generate dynamically two arrays at same time with Formik

Question

I working in a form who generate fields dynamically using formik with the that acts as a functional component.

So, I have this object to send on submit to my backend:

{
  "tapes": [
  {
    "name": "",
    "elements": [
       {
        "propsOne": "",
        "propsTwo": "",
        "view": 0,
       }
    ]
   }
  ],
  "typeOptions": []
}

As you can see, I have two arrays to working in this json object, one is Tapes who has Elements to work together and typeOptions who has values to send. My proposal is to send in a form with dynamic fields to my backend when whenever the user add new tapes and add new field props which will be rendered later in a mobile app.

Assuming the user added two new tapes and added two new elements for each one, the result of this json would be this:

{
  "tapes": [
  {
    "name": "TapeOne",
    "elements": [
       {
        "propsOne": one,
        "propsTwo": two,
        "view": 0,
       },
       {
        "propsOne": 1,
        "propsTwo": 2,
        "view": 0,
       }
    ]
   },
   {
    "name": "TapeTwo",
    "elements": [
       {
        "propsOne": one,
        "propsTwo": two,
        "view": 0,
       },
       {
        "propsOne": 1,
        "propsTwo": 2,
        "view": 0,
       }
    ]
   }
  ],
  "typeOptions": []
}

Well, so far so good, I can form a dynamic generation of Tapes and Elements according to the user's request, but there is a moment when the user asks for an option selector and the value I get in Elements is in the View, where number by the value of 1 is required.

{
  "tapes": [
  {
    "name": "",
    "elements": [
       {
        "propsOne": "",
        "propsTwo": "",
        "view": 1,
       }
    ]
   }
  ],
  "typeOptions": [
    {
     "values": []
    }
  ]
}

It is at this point that I need to retrieve the values that it passes on in these fields that will be dynamically generated and insert them into a new array that is called typeOptions in its values, the flow being like this:

The user will ask for a field who has multiple fields, like a selector.
This field will be generated in Tapes, Elements with the value being assigned to view with 1
The user will pass the values in these fields and they will be placed in typeOptions.values

So, the user add this new field and when this happens, I need pass the values that will be passed on fields will be generated for him.

The result needs be like this:

{
  "tapes": [
  {
    "name": "",
    "elements": [
       {
        "propsOne": "One",
        "propsTwo": "Two",
        "view": 1,
       }
    ]
   }
  ],
  "typeOptions": [
    {
     "values": ["ValueOne", "ValueTwo", "ValueThree"]
    }
  ]
}

Or when two Elements has the same view like 1:

{
  "tapes": [
  {
    "name": "",
    "elements": [
       {
        "propsOne": "One",
        "propsTwo": "Two",
        "view": 1,
       },
       {
        "propsOne": "1",
        "propsTwo": "2",
        "view": 1,
       }
    ]
   }
  ],
  "typeOptions": [
    {
     "values": ["ValueOne", "ValueTwo", "ValueThree"]
    },
   {
     "values": ["Value1", "Value2", "Value3"]
   } 
  ]
}

I've already tried to use two having one inside the other, as I already do for Tapes and Elements, because with this I could use the map function to get the view value and add a conditional to permeate two new to add the values not only for each object selected inside the typeOptions, but also for each value that is inserted together.

What is the best way and best practice to do this?

How to generate dynamically two arrays at same time with Formik

0 Answers