React Academy · Lección

Campos dinámicos con useFieldArray

Añada, elimine y reordene campos dinámicos de formularios mediante el hook useFieldArray.

Campos dinámicos con useFieldArray es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Introducción

En esta lección usará el hook useFieldArray de React Hook Form para crear formularios con listas dinámicas de campos, como las que permiten añadir, eliminar y reordenar elementos.

¿Qué es useFieldArray?

useFieldArray administra un array de campos dentro de un React Hook Form. Proporciona los métodos append, prepend, remove, swap, move e insert para modificar la lista de campos.

import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

Configuración: control de useForm

useFieldArray requiere el objeto `control` de useForm. Desestructúrelo junto con register y handleSubmit.

const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

Representación de los campos

Recorra `fields` con map() para representar cada elemento. Use el `id` del campo como clave de React (no el índice). Registre cada campo mediante la sintaxis de rutas de arrays.

return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Añadir campos nuevos

Llame a append() con un objeto que contenga los valores predeterminados para añadir un campo nuevo al final de la lista. El formulario lo registra automáticamente.

<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Eliminar campos

Llame a remove(index) para eliminar un campo en una posición específica. Todos los campos posteriores avanzan una posición y sus registros se actualizan automáticamente.

<button onClick={() => remove(index)}>Delete</button>

Validación del número mínimo de campos

Puede validar la longitud del array en un esquema de Zod con .min() para asegurarse de que exista al menos un campo.

const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Intercambiar y mover campos

Use `swap(indexA, indexB)` para intercambiar dos campos, o `move(from, to)` para cambiar de posición un campo. Estos métodos se utilizan para crear listas de campos ordenables mediante arrastrar y soltar.

swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

useFieldArray anidado

Puede anidar useFieldArray dentro de otro useFieldArray para crear formularios dinámicos de varios niveles, como una factura con partidas, cada una con subelementos.

Enviar datos de arrays

Al enviar el formulario, handleSubmit pasa el array completo como parte del objeto de datos. Acceda a él mediante data.phoneNumbers: un array de objetos que coincide con la estructura de los campos.

const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

Comprobación rápida

¿Por qué debe usar field.id (en lugar del índice del array) como clave de React al representar campos de useFieldArray?

Repaso

useFieldArray le proporciona un array fields y los métodos append/remove/swap/move. Use field.id como clave de React, registre los campos con la sintaxis «fieldName.index.subfield» y valide los arrays con min/max de Zod.

Curso completado

¡Enhorabuena! Ha terminado **Gestión de formularios con React Hook Form**. Ahora puede crear formularios eficientes con RHF, aplicar la validación de esquemas de Zod y crear arrays de campos dinámicos.

Preguntas frecuentes

¿La lección «Campos dinámicos con useFieldArray» es gratis?

Sí — el texto completo de «Campos dinámicos con useFieldArray» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Campos dinámicos con useFieldArray»?

Añada, elimine y reordene campos dinámicos de formularios mediante el hook useFieldArray. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Campos dinámicos con useFieldArray»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Primeros pasos con React Hook Form
Reglas de validación y mensajes de error
Validación de esquemas con Zod
Campos dinámicos con useFieldArray

← Volver a React Academy