Problem with Array with multiple nested arrays

[julio3266]

Hi, I was wondering if anyone could help me with a problem. I'm building a form that receives data from an array that has the following structure:

const arrayValues = [
   [
         ['ADULT'], ['CHILD'] // here are the values ​​for each input, it only reads these values ​​from above
   ], 
   [
      ['ADULT'], ['CHILD']
   ]
]

however when giving console in the useForm control it reads only the first array, the form is being rendered correctly, the problem is in the value of each input, because it is only reading the data from an array.

[Moshyfawn]

Can you provide a codesandbox for your use-case?

[julio3266]

of course... just five minutes, please

[julio3266]

@Moshyfawn https://codesandbox.io/s/react-hook-form-js-forked-rby4h?file=/src/App.js

[Moshyfawn]

So, there're a couple of issue with what you're trying to do.

• The main one is that you're using RHF V7 (7.22.5)

"dependencies": {
  "react-hook-form": "7.22.5"
},

but the way you're using the <Controller /> is from V6

render={({ value, onChange }) => (
  <input value={value} onChange={onChange} />
)}

Since V7, the API for <Controller /> has changed and now requires you to access your field value and handlers from the field property returned from render

render={({ field }) => (
  <input value={field.value} onChange={field.onChange} />
)}

Please, refer to the RHF V7 docs to learn more about the current API

• Second point is RHF doesn't support flat arrays. What that means is you can't have this structure:

const DATA = [
  [
    {
      type: "ADULT"
    }
  ],
  [
    {
      prop: "ADULT"
    }
  ]
]

You gotta extend it to something like this:

const defaultValues = {
  rooms: [
    {
      number: 101,
      guests: [
        { type: "ADULT", firstName: "", lastName: "" },
        { type: "ADULT", firstName: "", lastName: "" }
      ]
    },
    {
      number: 102,
      guests: [
        { type: "ADULT", firstName: "", lastName: "" },
        { type: "ADULT", firstName: "", lastName: "" }
      ]
    }
  ]
};

Note the rooms and guest properties.

• The third point is more of a suggestion. I encourage you to explore and use the useFieldArray form hook instead of manually trying to manage your nested values. It will help you add / remove etc. your fields if you need such functionality in the future (I assume that from the data you're working with).

I've created this CSB with the concepts I just talked about above. Please, take a look and don't hesitate to ask for clarifications

[Moshyfawn]

Is this what you're looking for, @julio3266? I've updated my CSB with some validation rules and error messages.

[julio3266]

@Moshyfawn just to understand... i need use the validation in Controller or i can use the resolver as yup schema in this case...

[JamesWong1999]

I think validation should be either with build-in or schema validation, they can't be mixed.

[Moshyfawn]

Yep, @JamesWong1999, you're right!
@julio3266, you wanna decided to go with field level validations (rules on Controller and validation on register) or to use the resolver and validation schema. I'd say, resolvers are quite a bit more flexible. Seeing your use-case, it's easier to manage the more complex forms with a validation schema.

[julio3266]

@Moshyfawn, that it! The problem is, i can't use the useForm in the child component(form). How i can insert a resolver, in this case?

[RhydamKapoor]

{
name: "",
description: "",
data: [
{
id: "",
heading: "",
line: [{ id: "", value: "" }],
code: [{ id: "", value: "" }],
},
],
},

How will you access line and code? How will you append or remove in this (line and code) array in the data array loop?