🚀 Динамические поля с React Hook Form и Controller Если в вашем приложении нужно создавать формы с динамическими полями, то React Hook Form в сочетании с useFieldArray и Controller станет идеальным решением. Этот подход особенно полезен, когда вы работаете с управляемыми компонентами или сторонними библиотеками UI 🔹Что мы будем делать? - Создадим форму с динамическими полями. - Используем useFieldArray для управления массивом данных. - Подключим контролируемые компоненты через Controller. 🔹Реализация

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      users: [{ name: '', age: '' }],
    },
  });

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

  const onSubmit = (data) => {
    console.log(data); 
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id} style={{ marginBottom: '10px' }}>
          <Controller
            name={`users.${index}.name`}
            control={control}
            render={({ field }) => (
              <input {...field} placeholder="Имя" />
            )}
          />
          <Controller
            name={`users.${index}.age`}
            control={control}
            render={({ field }) => (
              <input {...field} placeholder="Возраст" type="number" />
            )}
          />
          <button type="button" onClick={() => remove(index)}>
            Удалить
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '', age: '' })}>
        Добавить поле
      </button>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default DynamicForm;

🔹 Как это работает? 1. useFieldArray - Позволяет управлять массивами данных, например, добавлять или удалять элементы. - fields — текущие элементы массива. - append — добавляет новый объект в массив. - remove — удаляет элемент по индексу. 2. Controller - Используется для интеграции управляемых компонентов. - Автоматически связывает value, onChange и другие свойства с вашим компонентом. 3. Динамические поля - С каждым вызовом append добавляется новый объект с полями, соответствующими вашему массиву. - При удалении элемент удаляется из массива и формы. 🔹 Преимущества подхода - Простота работы с массивами данных. - Гибкость: подходит для любых сторонних компонентов. - Производительность: React Hook Form оптимизирован для минимизации ререндеров. 🎯 Заключение React Hook Form это удобный и мощный инструмент для работы с полями. Это упрощает работу с управляемыми компонентами и добавляет гибкость вашему коду. Попробуйте интегрировать эту функциональность в своих проектах! ReactJs Daily | #begginers