How to set multiple values at once in react hook form using Typescript

Question

I have the following interface :

export interface DataResponse {
  user_id: string;
  name: string;
  phone_number: string;
  country: string;
}

which is used as a type for fetching the data with react query. I am using useEffect to populate the fields if there is data:

useEffect(() => {
    if (userData) {
      Object.entries(userData).forEach(
        ([name, value]) => setValue(name, value));
    }
}, [setValue, userData]);

The type of userData is DataResponse... when I set the values with setState(name, value) it underlines name and throws the following error:

Argument of type 'string' is not assignable to parameter of type | "name" | "phone_number" | "country"

Why you want to update the state while iterating the object ? is setValue for updating a local state ? If so just do setValue(userData) and treat your state as an object. — Antonio Pantano
– Antonio Pantano, Commented Dec 8, 2021 at 0:06

knoefel · Accepted Answer · 2021-12-08 07:48:12Z

45

I think you can just use RHF's reset method here.

useEffect(() => {
    if (userData) {
      reset(userData);
    }
}, [userData, reset]);

answered Dec 8, 2021 at 7:48

knoefel

7,0383 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Titenis Over a year ago

the main problem with reset approach is that after this you wont be able to completely reset the form, as the object you pass to reset function becomes the default values

knoefel Over a year ago

I'm not sure i understand your comment correctly, but you can pass a config object to reset. One of the props is keepDefaultValues and prevents overwriting the default values. You can read more about it here.

Riyasaat Ahmed Rahul · Accepted Answer · 2023-08-11 00:26:45Z

2

in case the previous form values are also needed:

useEffect(() => {
    if (userData) {
      reset((prev) => ({...prev, ...userData}));
    }
}, [userData, reset]);

answered Aug 11, 2023 at 0:26

Riyasaat Ahmed Rahul

2762 silver badges7 bronze badges

Comments

TheWuif · Accepted Answer · 2021-12-07 23:01:03Z

1

first: why do you check for userData, but than use userBillingData?

second: as i dont know what userBillingData is, you can use:

useEffect(() => {
    if (userData) {
      Object.entries(userBillingData).forEach(
        ([name, value]: any) => setValue(name, value));
    }
}, [setValue, userData]);

otherwise you will have to cast the correct type.

ES7 Object.entries() in TypeScript not working

answered Dec 7, 2021 at 23:01

TheWuif

1,0469 silver badges11 bronze badges

1 Comment

DragoJokera Over a year ago

Yeap, sorry userBillingData should be userData.

Julio Milani · Accepted Answer · 2021-12-07 23:05:03Z

1

You can use keyof in that case:

useEffect(() => {
    if (userData) {
      Object.entries(userBillingData).forEach(
        ([name, value]) => setValue(name as keyof DataResponse, value));
    }
}, [setValue, userData]);

answered Dec 7, 2021 at 23:05

Julio Milani

3192 silver badges6 bronze badges

2 Comments

DragoJokera Over a year ago

Still throwing an error

Marius Zaharie Over a year ago

I've successfully did it like this setValue(name as keyof FormData, value);

Collectives™ on Stack Overflow

How to set multiple values at once in react hook form using Typescript

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related