Nested Array in useFieldArray

[akshaykumar771]

Hello everyone. I just started using react hook form and trying to understand most of the things. I need to implement nested inputs and I am using useFieldArray api for that purpose.

I have a parent component where i have my main form, 1st child component where i render one input field when the user clicks on the button. This is working fine.

Now I have to render 2nd child component from 1st child component based the button click event. I am unable to render the 2nd child component on click of a button. I did not find any examples relevant to that. It would be great and really helpful if any of you could help me fix this.

1st child component looks like this

const Attributes = () => {
  const { register, setValue, getValues } = useFormContext();
  const {
    fields, append, remove
  } = useFieldArray({
    name: "attributes",
  });
  return (
    <div>
      {fields.map((field, index) => (
        <div key={field.id}>
          <label>
            Name
            <input
              name={`items[${index}].value`}
              ref={register()}
              defaultValue={field.value}
            />
          </label>
          <button type="button" onClick={() => remove(index)}>Delete</button>
          <AttributeValue index={index} {...{ register }} />
        </div>
      ))}
      <button type="button" onClick={() => append()}>Add Attribute</button>
      <button
        type="button"
        onClick={() => {
          setValue("attributes", [
            getValues().attributes,
            {
              name: "append",
              nestedArray: [{ field1: "append" }]
            }
          ]);
        }}
      >
        Append Nested
      </button>
    </div>
  );
};

2nd child component

const AttributeValue = ({ nestIndex, register }) => {
  const {
    fields, remove,
  } = useFieldArray({
    name: `attributes[${nestIndex}].values`,
  });
  return (
    <div>
      {fields.map((field, k) => (
        <div key={field.id}>
          <label>
            value
            <input
              name={`attributes[${nestIndex}].values[${k}]`}
              ref={register()}
              defaultValue={field.value}
            />
          </label>
          <button type="button" onClick={() => remove(k)}>Delete</button>
        </div>
      ))}
    </div>
  );
};
export default AttributeValue;

Looking forward for hints, solutions or ideas. Thanks in advance

[bluebill1049]

can you share a codesanbox with it?

[aspirisen]

@bluebill1049 am i right that currently if you have nested arrays and you want to use i.e. append for the inner array you have to add wrapper component to enable usage of useFieldArray? So it is not possible to operate nested array in one single react component.

[jgreens]

@bluebill1049 or @geekysam7 – I am just trying to conceptualize the example in the codesandbox for nested arrays:

Why do we need to use setValue when appending a nested array, instead of simply appending using parent's append function?

Referring to this example: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-m8w6j?file=/src/fieldArray.js:1043-1086

[bluebill1049]

append is the recommended option.

[vresetnikov]

Hello, the provided example won't pass the Typescript compiler checks resulting in errors, specifically when using the append buttons.

Could you kindly provide the exactly same example CBS but written in TS, please?

[Moshyfawn]

Consider providing a sandbox with the types you've setup instead, so we can see what throws error