React-Hook Form: Cannot read properties of undefined (reading 'field')

Question

My form is a nested one and if I'll only submit one product, there are no errors, But If I'll click Add More Product and click the button to add more colors this is the error that I'm getting:

Cannot read properties of undefined (reading 'field')

This is where it pointed out:

<input
  36 |   name={`test[${nestIndex}].nestedArray[${k}].color`}
  37 |   ref={register({ required: true })}
> 38 |   defaultValue={item.field}
     |                     ^
  39 |   style={{ marginRight: "25px" }}
  40 | />

and here:

return (
  19 |   <div>
> 20 |     {fields.map((item, k) => {
     |            ^
  21 |       return (
  22 |         <div key={item.id} style={{ marginLeft: 20 }}>
  23 |           <label>{k + 1}</label>

Adding more products, and adding more colors will make these errors appear

This is what the form looks like:

Codesandbox link: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/index.js

The error is in the fieldArray.js:

i

mport React from "react";
import { useFieldArray } from "react-hook-form";
import NestedArray from "./nestedFieldArray";
import { TextField } from "@mui/material";

let renderCount = 0;

export default function Fields({ control, register, setValue, getValues }) {
  const { fields, append, remove, prepends } = useFieldArray({
    control,
    name: "test"
  });

  renderCount++;

  return (
    <>
      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              {/* <select
                ref={register()}
                name={`test[${index}].name`}
                defaultValue={item.name}
              >
                <option value="">Select</option>
                <option value="10">ItemA</option>
                <option value="20">ItemB</option>
              </select> */}
              {/* {index + 1}  to show the qty */}
              <TextField
                name={`test[${index}].nestedArray[${index}].product`}
                inputRef={register({ required: true })}
                defaultValue={item.name}
              />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
              <NestedArray nestIndex={index} {...{ control, register }} />
            </li>
          );
        })}
      </ul>

      <section>
        <button
          type="button"
          onClick={() => {
            append({ name: "append" });
          }}
        >
          Add product
        </button>
      </section>

      <span className="counter">Render Count: {renderCount}</span>
    </>
  );
}

How can I fix this?

Answer 1

For me a similar issue arose when two input fields had empty string provided in the <input {...register(name)}/>

Answer 2

if you're using joedit 100% working|||| const { register, handleSubmit, formState: { errors }, control } = useForm();

                                                    <Controller
                                                        control={control}
                                                        defaultValue={""}
                                                        {...register("address_en", { required: true })}
                                                        render={({ field }) => (
                                                            <JoditReact
                                                                config={config}
                                                                value={field.value}
                                                                onChange={field.onChange}
                                                                onBlur={field.onBlur}
                                                                ref={field.ref}
                                                            />
                                                        )}
                                                    />
                                                     {errors.address_en?.type === 'required' && <span className='formError'>Address (en) is required</span>}

Answer 3

Here are the couple of things that I have found.

1. in fieldArray.js file add item.product instead of item.name

<TextField
   name={`test[${index}].product`}
   inputRef={register({ required: true })}
   defaultValue={item.product}
/>

2. in nestedFieldArray.js add refer and defaultValue in Size component and remove field1 from name and add size

<Size
    name={`test[${nestIndex}].nestedArray[${k}].size`}
    menuItems={menuItems}
    refer={register({ required: true })}
    defaultValue={item.size}
    control={control}
/>

3. in Size.js file first import React from 'react'; then add defautlValue in props

const Size = ({ name, menuItems, defaultValue, control }) => (
   <Controller
       as={
           <Select>
               {menuItems.map(({ value, label }, index) => (
                   <MenuItem key={index} value={value}>
                       {label}
                   </MenuItem>
               ))}
           </Select>
       }
       name={name}
       control={control}
       defaultValue={defaultValue}
       rules={{ required: true }}
       fullWidth
   />
);