React Hook Form 다차원 배열 관리

App.tsx

import React from 'react';
import {useFieldArray, useForm} from "react-hook-form";
import FirstArray from "./FirstArray";

export interface DummyDataType {
  firstArray: Array<{
    first: string, secondArray: Array<{
      second: string,
      thirdArray: Array<{
        third: string
      }>
    }>
  }>
}

const dummyData: DummyDataType = {
  firstArray: []
}


function App() {
  const formData = useForm<DummyDataType>({
    mode: 'onSubmit',
    defaultValues: dummyData
  });

  const firstArrayField = useFieldArray({
    control: formData.control,
    name: 'firstArray',
  })

  const appendFirstArray = () => {
    const count = firstArrayField.fields.length;
    firstArrayField.append({
      first: `first - ${count}`,
      secondArray: [],
    })
  }

  return (
    <>
      <button onClick={() => console.log(formData.getValues())}>데이터</button>
      <button onClick={appendFirstArray}>추가</button>
      {
        firstArrayField.fields.map((field, idx) => {
          return <FirstArray key={field.id} formData={formData} firstIndex={idx} remove={firstArrayField.remove}/>
        })
      }
    </>
  );
}

export default App;

FirstArray.tsx

import {useFieldArray, UseFieldArrayRemove, UseFormReturn} from "react-hook-form";
import {DummyDataType} from "./App";
import SecondArray from "./SecondArray";

interface FirstArrayPropsInterface {
  formData: UseFormReturn<DummyDataType>,
  remove: UseFieldArrayRemove,
  firstIndex: number,
}

const FirstArray = ({formData, firstIndex, remove}: FirstArrayPropsInterface) => {
  const secondArrayField = useFieldArray({
    control: formData.control,
    name: `firstArray.${firstIndex}.secondArray`,
  })

  const onAppend = () => {
    const count = secondArrayField.fields.length;
    secondArrayField.append({
      second: `second - ${count}`,
      thirdArray: [],
    })
  }

  const onDelete = () => {
    remove(firstIndex);
  }

  return <div style={{
    border: 'solid',
    borderColor: 'red',
    margin: '10px',
    padding: '10px'
  }}>
    <button onClick={onDelete}>삭제</button>
    <button onClick={onAppend}>추가</button>

    <div>First Array - {firstIndex}</div>
    <div>
      <span>First : </span>
      <input {...formData.register(`firstArray.${firstIndex}.first`)}/>
    </div>
    <ul>
      {
        secondArrayField.fields.map((field, index) => {
          return <SecondArray key={field.id} formData={formData} firstIndex={firstIndex} secondIndex={index}
                              remove={secondArrayField.remove}/>
        })
      }
    </ul>

  </div>
}

export default FirstArray;

SecondArray.tsx

import {useFieldArray, UseFieldArrayRemove, UseFormReturn} from "react-hook-form";
import {DummyDataType} from "./App";
import ThirdArray from "./ThirdArray";

interface SecondArrayPropsInterface {
  formData: UseFormReturn<DummyDataType>,
  remove: UseFieldArrayRemove,
  firstIndex: number,
  secondIndex: number,
}

const SecondArray = ({formData, firstIndex, secondIndex, remove}: SecondArrayPropsInterface) => {
  const thirdArrayField = useFieldArray({
    control: formData.control,
    name: `firstArray.${firstIndex}.secondArray.${secondIndex}.thirdArray`
  })

  const onAppend = () => {
    const count = thirdArrayField.fields.length;
    thirdArrayField.append({
      third: `third ${count}`
    })
  }

  const onDelete = () => {
    remove(firstIndex);
  }

  return <div style={{
    border: 'solid',
    borderColor: 'blue',
    margin: '10px',
    padding: '10px'
  }}>
    <button onClick={onDelete}>삭제</button>
    <button onClick={onAppend}>추가</button>
    <p>Second Array</p>
    <div>
      <span>Second : </span>
      <input {...formData.register(`firstArray.${firstIndex}.secondArray.${secondIndex}.second`)}/>
    </div>
    <ul>
      {
        thirdArrayField.fields.map((field, index) => {
          return <ThirdArray key={field.id} remove={thirdArrayField.remove} formData={formData} firstIndex={firstIndex}
                             secondIndex={secondIndex} thirdArrayIndex={index}/>
        })
      }
    </ul>

  </div>
}

export default SecondArray;

ThirdArray.tsx

import {UseFieldArrayRemove, UseFormReturn} from "react-hook-form";
import {DummyDataType} from "./App";

interface ThirdArrayInterface {
  formData: UseFormReturn<DummyDataType>,
  remove: UseFieldArrayRemove,
  firstIndex: number,
  secondIndex: number,
  thirdArrayIndex: number,
}

const ThirdArray = ({thirdArrayIndex, firstIndex, secondIndex, formData, remove}: ThirdArrayInterface) => {
  const onDelete = () => {
    remove(firstIndex);
  }

  return <div style={{
    border: 'solid',
    borderColor: 'green',
    margin: '10px',
    padding: '10px'
  }}>
    <button onClick={onDelete}>삭제</button>
    <p>Third Array</p>
    <div>
      <span>Third : </span>
      <input {...formData.register(`firstArray.${firstIndex}.secondArray.${secondIndex}.thirdArray.${thirdArrayIndex}.third`)}/>
    </div>
  </div>
}

export default ThirdArray;