react-hook-form: Update form data

Question

In my project using react-hook-form to update and create details. There is an issue in the update form, the values are not updating properly, and the code

countryupdate.tsx

import React from 'react'
import { useQuery } from 'react-query'
import { useParams } from 'react-router-dom'
import { useCountryUpdate } from '../api/useCountryUpdate'
import { getDetails, useDetails } from '../api/useDetails'
import { CountryCreateUpdateForm } from '../forms/createupdateForm'


interface data{
  id: string,
  name: string
 }

export const CountryUpdatepage = () => {
  const { dataId }: any = useParams()
  const { data, isLoading, isError } = useQuery(['details', dataId], () => getDetails(dataId), {
    enabled: !!dataId,
  });

  const { mutateAsync } = useCountryUpdate();

  const onFormSubmit = async() =>{
    console.log("mutate", {...data})
    await mutateAsync({...data, dataId})
    
  }
    
  return (
    <div>
      <h3>Update Details</h3>
        <CountryCreateUpdateForm defaultValues={data} onFormSubmit={onFormSubmit} isLoading={undefined}/>
    </div>
  )
}

Here, when console the value inside onFormSubmit, it shows the same data in the previous state

createupdateform.tsx

import { useState } from "react"
import { useCountryCreate } from "../api/usecountrycreate"
import { useForm } from "react-hook-form"

export const CountryCreateUpdateForm = ({ defaultValues, onFormSubmit, isLoading }: any) => {
    // console.log("name", defaultValues.data.name)
    const { register, handleSubmit } = useForm({ defaultValues:defaultValues?.data });
  
    const onSubmit = handleSubmit((data) => {
      onFormSubmit(data)
    })

  return (

        <form onSubmit={onSubmit}>
            <div>
              <label>Name</label>
              <input {...register('name')} type="text" name="name" />   
            </div>         
            <button type="submit" >submit</button>
        </form>



  )
}

I am a beginner in react typescript, Please give me suggestions to solve this problem.

Answer 1

in countryupdate.tsx

the data is undefined at the beggining, so defaultValue of form is not updated after that;

it should help:

 return (
    <div>
      <h3>Update Details</h3>
        {data?.data && <CountryCreateUpdateForm defaultValues={data} onFormSubmit={onFormSubmit} isLoading={undefined}/>
    }
    </div>
  )