Динамический state в форме?

Question

[SerjSkachkov]

Пытаюсь создать динамическую форму с валидацией.
Валидация работает таким образом что берет ключи из стейта и прверяет на условия.
Как правильно в стейт fieldsData положить ключ с именем поля?

Я новичек не судите строго.

Пример передаваемого масива с полями форм:

const formData = {
fields: [
{ label: "Username", name: "name", type: "text", id: "username" },
{ label: "Password", name: "password", type: "password", id: "password" },
],
buttonText: "Login",
};

Пример формы:

import React, { useState } from "react";

import { UiFormField } from "../components/UiFormField/UiFormField";
import { UiAlert } from "../components/UiAlert/UiAlert";
import { UiButton } from "../components/UiButton/UiButton";

import validateForm from "../helpers/validateFrom";

export const Form = ({
  formData: { fields, onSubmit, buttonText },
  errorMessage,
}) => {
  const [fieldsErrors, setFieldsErrors] = useState({});
  const [fieldsData, setFieldsData] = useState({});

  const hanleChangeField = (e) => {
    setFieldsData({
      ...fieldsData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { error, isValid } = validateForm(fieldsData);

    if (!isValid) {
      return setFieldsErrors(error);
    }
    setFieldsErrors({});
  };
  return (
    <div className="form">
      <form onSubmit={handleSubmit}>
        {fields.map((field) => {
          const { id, name, type, label } = field;
          return (
            <UiFormField
              id={id}
              name={name}
              type={type}
              label={label}
              onChange={hanleChangeField}
              error={fieldsErrors.name}
            />
          );
        })}
        {errorMessage && <UiAlert type="danger" message={errorMessage} />}
        <UiButton className="btn-primary btn-full" onClick={handleSubmit}>{buttonText}</UiButton>
      </form>
    </div>
  );
};

Answer 1

[Zhanna_K]

Рекомендую использовать redux-form.
Сам обрабатывает данные из формы и добавляет в store. Валидацию прописать тоже очень легко!