T
TanStack•11mo ago
foreign-sapphire

form.setFieldValue with field array

I have a form defined like this: 
const form = useForm<Partial<Recipe>>({
  defaultValues: {
    name: name ?? "",
    description: description ?? "",
    instructions: instructions ?? "",
    categories: [...(recipe?.categories ?? [])],
    ingredients: [...(recipeIngredients ?? [])],
    steps: [...(recipe?.steps ?? [])],
  },
  onSubmit: async ({ value }) => {
    await onSubmitHandler(value);
  },
});
const form = useForm<Partial<Recipe>>({
  defaultValues: {
    name: name ?? "",
    description: description ?? "",
    instructions: instructions ?? "",
    categories: [...(recipe?.categories ?? [])],
    ingredients: [...(recipeIngredients ?? [])],
    steps: [...(recipe?.steps ?? [])],
  },
  onSubmit: async ({ value }) => {
    await onSubmitHandler(value);
  },
});
I am trying to update a field in the ingredients array (stored as a temporary value when editing it, so I can revert to the previous state if the user cancels the edit): 
type SingleIngredient = Recipe["ingredients"][number];
const [tempIngredient, setTempIngredient] = useState<SingleIngredient | undefined>(
  undefined,
);

// Rest of component

form.setFieldValue(`ingredients[${index}]`, tempIngredient);
type SingleIngredient = Recipe["ingredients"][number];
const [tempIngredient, setTempIngredient] = useState<SingleIngredient | undefined>(
  undefined,
);

// Rest of component

form.setFieldValue(`ingredients[${index}]`, tempIngredient);
When doing this I get the following TypeScript error: 
Argument of type '`ingredients[${number}]`' is not assignable to parameter of type 'PrefixObjectAccessor<Partial<Recipe>, []>'.
Argument of type '`ingredients[${number}]`' is not assignable to parameter of type 'PrefixObjectAccessor<Partial<Recipe>, []>'.
Why can't the setFieldValue() detect that is a proper key? Is there a better way to revert the value at the specific index to the previous state?
3 Replies
foreign-sapphire
foreign-sapphireOP•11mo ago
@crutchcorn sorry for the tag but any ideas here?
rare-sapphire
rare-sapphire•11mo ago
It might be that useForm shouldn't accept a generic; it'll cause bugs in the future if not this bug itself 
const form = useForm({
  defaultValues: {
    name: name ?? "",
    description: description ?? "",
    instructions: instructions ?? "",
    categories: [...(recipe?.categories ?? [])],
    ingredients: [...(recipeIngredients ?? [])],
    steps: [...(recipe?.steps ?? [])],
  } as Partial<Recipe>,
  onSubmit: async ({ value }) => {
    await onSubmitHandler(value);
  },
});
const form = useForm({
  defaultValues: {
    name: name ?? "",
    description: description ?? "",
    instructions: instructions ?? "",
    categories: [...(recipe?.categories ?? [])],
    ingredients: [...(recipeIngredients ?? [])],
    steps: [...(recipe?.steps ?? [])],
  } as Partial<Recipe>,
  onSubmit: async ({ value }) => {
    await onSubmitHandler(value);
  },
});
Our docs have a few useForm<> usages that we're removing soon
foreign-sapphire
foreign-sapphireOP•11mo ago
Awesome, thank you for the quick response! Will give that a shot

Did you find this page helpful?