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

user_11811960 0
Viewed 8019

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"
react-hook-form typescript reactjs
3 Answers

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

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

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

user_139469400

You can use keyof in that case:

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