react-hook-form

Happy new year 2022!

💻 Feature/avoid omitting key name use field array (improve DX) (#7301)

const App = () => {
  const { control, register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      test: [{id: 'UUID5678', test: 'data' }] // id will be remained as it match default keyName
    }
  });
  const { fields, append } = useFieldArray({
    control,
    name: 'test',
  });

  return (
    <form>
      {fields.map((field, index) => {
        return <input key={field.id} {...register(`test.${index}.test`)} />;
      })}

      <button
        type={'button'}
        onClick={() => {
          append({
            id: 'UUID1234', // id value will be remained as it match default keyName
            test: '1234',
          });
        }}
      >
        append
      </button>
    </form>
  );
};