Field array - conditional rendering

[BeLi4L]

I have a form where you can add/remove items, and where each item has a type field, and depending on this type, I want to display different things.

However, when using useFieldArray, I can't render things conditionnally based on item.type, since it's using uncontrolled components, which aren't re-rendering my component when type changes.

How should I proceed to conditionnally display elements in a fieldArray row?

Here's a simplified example: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-61zqg?file=/src/index.js

When you change the type from "foo" to "bar", I want the value on its right to change, but it doesn't :(

[torian257x]

I think there is an inherente problem with rhf and dynamically drawing / removing inputs
I am new to react so not sure how that situation is handled in formik

but I feel like rhf would profit from some "forceRerender" function or the like

I was reading through the docs, but it wasn't clear to me how to force a rerender or what the implications of a rerender are (as it isn't controlled, I guess all the values are lost?)

[bluebill1049]

I have a form where you can add/remove items, and where each item has a type field, and depending on this type, I want to display different things.

However, when using useFieldArray, I can't render things conditionnally based on item.type, since it's using uncontrolled components, which aren't re-rendering my component when type changes.

How should I proceed to conditionnally display elements in a fieldArray row?

Here's a simplified example: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-61zqg?file=/src/index.js

When you change the type from "foo" to "bar", I want the value on its right to change, but it doesn't :(

at the moment, useFieldArray doesn't support conditional render, you will have to use css to toggle the visibility.

[bluebill1049]

I think there is an inherente problem with rhf and dynamically drawing / removing inputs
I am new to react so not sure how that situation is handled in formik

but I feel like rhf would profit from some "forceRerender" function or the like

I was reading through the docs, but it wasn't clear to me how to force a rerender or what the implications of a rerender are (as it isn't controlled, I guess all the values are lost?)

The difference is between uncontrolled and controlled. controlled host their inputs inside the local state, uncontrolled (RHF) host input value itself.

[BeLi4L]

I have a form where you can add/remove items, and where each item has a type field, and depending on this type, I want to display different things.
However, when using useFieldArray, I can't render things conditionnally based on item.type, since it's using uncontrolled components, which aren't re-rendering my component when type changes.
How should I proceed to conditionnally display elements in a fieldArray row?
Here's a simplified example: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-61zqg?file=/src/index.js
When you change the type from "foo" to "bar", I want the value on its right to change, but it doesn't :(

at the moment, useFieldArray doesn't support conditional render, you will have to use css to toggle the visibility.

Even if I wanted to use CSS to toggle the visibility, I can't use field.type to set a class on my elements, since it doesn't change.

If I use onChange, it's passed to a <Controller> and I have a weird bug where the 1st time, the value isn't updated properly (undefined instead of the expected selected value) :/

I guess I'll try formik, to see if it's easier for my use case.

Thanks anyway ;)

[bluebill1049]

honestly, if for your use case, probably easier with Controlled form. Good luck :)

[bluebill1049]

For others who encounter the same issue, here is the solution:

1. watch can watch the entire FieldArray, which similar behavior as Controlled form
2. to watch partial form, you can use useWatch

we do have a plan to make it work with conditional re-render for useFieldArray, but there are other priorities for now.

[rlesniak]

How things are going on this?

[bluebill1049]

use shouldUnregister: false

[rishi23root]

@bluebill1049 is this fixed by now We do have a plan to make it work with conditional re-render for useFieldArray, but there are other priorities for now. because use shouldUnregister: false it does work but for me, it is causing rerenders

[rishi23root]

I am new to RHF, there must be some better way to do this I don't know, but I fixed it for me, under useFieldArray, no re-renders anymore

I had to extract the functionality a bit and take control of the element

<Controller
  name={`education.${index}.isStudyingHere`}
  render={({ field: { onChange, onBlur, value, ref } }) => (
    <>
      <FormInput
        ref={ref}
        type="checkbox"
        name={`education.${index}.isStudyingHere`}
        onChange={onChange} // send value to hook form
        onBlur={onBlur} // notify when input is touched/blur
        value={value}
      />
      <FormInput
        type="date"
        {...register(`education.${index}.startDate`)}
      />
      <FormInput
        type="date"
        {...register(`education.${index}.endDate`, {
          disabled: value,
        })}
      />
    </>
  )}
/>

component FormInput reference - https://github.com/rishi23root/resume-editor/blob/4bb4be1bb7e6531fb6236f5261e1a150e2dddbdf/src/components/pageSpecific/builder/customFormFields/formInput.tsx#L20

if there is any better way to do the same please provide me with the info

[Moshyfawn]

is this fixed by now We do have a plan to make it work with conditional re-render for useFieldArray, but there are other priorities for now. because use shouldUnregister: false it does work but for me, it is causing rerenders

The useFieldArray implementation has not changed since then, as "controlling" the rendering of the field array is part of how RHF keeps track of the position of the fields.

I understand this is not ideal, but you can extract the dependent fields into their own component and use useWatch to subscribe to the exact field array item at the component level (as opposed to the form root level with watch) to conditionally render your nested fields UI without converting the item in question to a controlled component.

Here's a working codesandbox.

function App() {
  const { control, register } = useForm({
    defaultValues: {
      fields: [{ type: "foo" }]
    }
  })

  const { fields } = useFieldArray({ control, name: "fields" })

  return (
    <form>
      {fields.map((field, index) => (
        <fieldset key={field.id}>
          <select {...register(`fields.${index}.type`)}>
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
          </select>
          <Child control={control} parentIndex={index} />
        </fieldset>
      ))}
    </form>
  )
}

function Child({ control, parentIndex }) {
  const type = useWatch({ control, name: `fields.${parentIndex}.type` })

  if (type === "foo") return <p>FOO</p>
  if (type === "bar") return <p>BAR</p>
}