githubmirror/react-hook-form

src/fieldArray.tsx

44 строки1 KB

Copilot

⚜️ feat: FieldArray component (#13394)

21 июн 2026, 03:24

21 июн 2026, 03:2492b1025

import type { FieldArrayPath, FieldArrayProps, FieldValues } from './types';
import { useFieldArray } from './useFieldArray';

/**
 * Component based on `useFieldArray` hook to work with controlled component.
 *
 * @example
 * ```tsx
 * function App() {
 *   const { control, register } = useForm<FormValues>({
 *     defaultValues: {
 *       test: [
 *         {
 *           value: '',
 *         },
 *       ],
 *     },
 *   });
 *
 *   return (
 *     <form>
 *       <FieldArray
 *         control={control}
 *         name="test"
 *         render={({ fields }) =>
 *           fields.map((field, index) => (
 *             <input key={field.id} {...register(`test.${index}.value`)} />
 *           ))
 *         }
 *       />
 *     </form>
 *   );
 * }
 * ```
 */
const FieldArray = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
  TKeyName extends string = 'id',
>(
  props: FieldArrayProps<TFieldValues, TName, TKeyName>,
) => props.render(useFieldArray<TFieldValues, TName, TKeyName>(props));

export { FieldArray };