Save the state of an fieldArray and then restore it via initial value.

[GTOsss]

In submit or watch, I get the wrong object that can be passed to initialValues. How do I get the current state with an array of objects that contain the id?

At the moment my implementation looks like this. The problem is that I can't get the full state at the time of submit.

const MyForm = () => {
  const [categories, setCategory] = React.useState<any>(formState.categories);
  const {register, handleSubmit, errors} = useForm({defaultValues: formState.categories});

  const addCategory = (name) => {
    setCategory(prev => [...prev, {name, key: uuid()}]);
  };

  const removeCategory = (id) => () => {
    setCategory(prev => [...prev.filter(item => item.key !== id)]);
  };

  const onSubmitInner = () => {
    onSubmit(1, {categories}, errors);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmitInner)}>
        {categories.map((field, index) => (
          <div key={field.key} className={styles.fieldItem}>
            <Input
              className={styles.inputWrap}
              classNameInput={styles.input}
              register={register({required: true})}
              name={`categories[${index}]`}
              defaultValue={field.name}
              required
            />
            <Button onClick={removeCategory(field.id)} />
          </div>
        ))}
      </form>

      <AddFieldItem onAddItem={addCategory} placeholder="Add new category" />
    </div>
  );
});

[GTOsss]

I resolved my problem:

  const onSubmitInner = (values) => {
    const currentCategories = values.categories.map((value, i) => ({...categories[i], value}));
    onSubmit(1, {categories: currentCategories}, errors);
  };

But now I have another problem. Removing an element from the component state does not remove it from the state of the form itself.

[bluebill1049]

what do you mean by wrong object? can you supply a CSB?

[bluebill1049]

Do you mean defaultValues at useForm?

[GTOsss]

Yes. But useFieldArray not working.

[bluebill1049]

codesandbox to reproduce?

[GTOsss]

https://codesandbox.io/s/react-hook-form-get-form-values-2llbl?file=/src/index.js

[GTOsss]

I realized what the mistake was. control must be passed if there is no context.