react-hook-form's useFieldArray function does not display data from an API when values are passed in

Question

react-hook-form's useFieldArray function does not display data from an API when values are passed in

Utilizing a fieldArray, I am constructing a form with react-hook-form. This form serves the dual purpose of creating and updating a user, and makes use of the "values" prop from react-hook-form. The field within the fieldArray API consists of two basic time inputs, accompanied by an "add" button that generates additional time inputs (initially empty).

default form
added field

The issue arises when fetching data prior to initializing this form, whereby if there is any breakTime present in the array field, it fails to render promptly on the UI. However, upon clicking the add button, all fields retrieved from the API are rendered simultaneously. (refer to images below)

all fields filled, except the array field

after clicking on add button of array field

My code snippet:

const form = useForm<OperatorOrManageData>({
    resolver: zodResolver(operatorOrManagerSchema),
    defaultValues: initializeDefaultValues(),
    mode: "all",
    values: data,
})

const { fields, append, remove } = useFieldArray({
    name: "breakTime",
    control: form.control,
})


    {fields.map((field, index) => (
                                    <div className="...">
                                        ...
                                    </div>
                                ))}

I attempted implementing a controlled field array as outlined in the documentation https://react-hook-form.com/docs/usefieldarray, but was unsuccessful.

javascript typescript forms rendering react-hook-form

Answer 1

Answer №1

@Ja1za1, Greetings! To retrieve your data from the parent component and display a loading state until the data is fetched, you can follow this approach:

Parent Component Example:

const Parent = () => {
  const {data, isLoading} = fetch("url");

  if(isLoading) {return <Loading />}

  if(data) {
     return <Child data={data} />
   }
}

return null

Child Component Example:

//CHILD
const Child = ({data}) => {
  const form = useForm<OperatorOrManageData>({
    resolver: zodResolver(operatorOrManagerSchema),
    defaultValues: initializeDefaultValues(),
    mode: "all",
    values: data,
  })
   //...other codes
}

Note: Be cautious while using

form.watch("inputFieldName")

as it may result in an array of fields with undefined values if disabled property is used.

For example: cars:[{value: undefined].

Make sure to employ readOnly attribute with the Input component rather than the FormField.

Incorrect Usage:

<FormField disabled control={form.control} name={` urls.${index}.value`} .....    />

❌

Incorrect Usage:

<Input disabled placeholder="type here" />

❌

Correct Usage:

<Input readOnly placeholder="type here" />

✔

Answer 2

@Ja1za1, Greetings! To retrieve your data from the parent component and display a loading state until the data is fetched, you can follow this approach:

Parent Component Example:

const Parent = () => {
  const {data, isLoading} = fetch("url");

  if(isLoading) {return <Loading />}

  if(data) {
     return <Child data={data} />
   }
}

return null

Child Component Example:

//CHILD
const Child = ({data}) => {
  const form = useForm<OperatorOrManageData>({
    resolver: zodResolver(operatorOrManagerSchema),
    defaultValues: initializeDefaultValues(),
    mode: "all",
    values: data,
  })
   //...other codes
}

Note: Be cautious while using

form.watch("inputFieldName")

as it may result in an array of fields with undefined values if disabled property is used.

For example: cars:[{value: undefined].

Make sure to employ readOnly attribute with the Input component rather than the FormField.

Incorrect Usage:

<FormField disabled control={form.control} name={` urls.${index}.value`} .....    />

❌

Incorrect Usage:

<Input disabled placeholder="type here" />

❌

Correct Usage:

<Input readOnly placeholder="type here" />

✔

react-hook-form's useFieldArray function does not display data from an API when values are passed in

Answer №1

Similar questions

Utilizing innerHTML of the <select> tag with windows.open()

Transforming unprocessed string information with a set position-dependent format into a structured format such as JSON

Uncovering Modified Form Elements Using jQuery

Error 19: Constraint violation - duplicate entry detected

Content is deleted by ng-bind-html following the < symbol (less than sign)

Jquery unresponsive in AJAX form output presentation

In my specific scenario, what is the most effective method for retrieving data from an EntityFramework database using JavaScript?

Is there a way to establish the position of a mesh in three.js before integrating it into the scene?

Ways to stop two JavaScript files from running at the same time

Can someone help clear up this confusion with CSS?

Display a popup in Angular 4 when a click event is triggered by a separate

Substitute placeholders in the HTML code with Angular syntax

In my chat application, I encountered the error message "Received an expression instead of an assignment or function call - no-unused-expressions"

What could be the reason behind the button's lack of color change with this particular code?

What is the best way to keep a text editable in a razor editor without it vanishing?

What is the best approach to creating customizable modules in Angular2?

I could use some assistance with deciphering JSON data

The specified width and height for a div containing images are not being accepted by Firefox

The issue persists with the MVC Controller parameter returning as null consistently, especially when the object field is

How come my website is loading a JavaScript file with outdated content?