Can a registration depend on its own form value?

[paulleonartcalvo]

I have a form which is essentially just a map of filter id's to their unique filter states. I'm using this for a data application where a user can add or delete any filters they want, so they can have between 0 (none) and n filters. Each filter should be able to be deleted individually.

So, my approach was to do, basically, this:

// MyFilterPanel.tsx

...
const {savedFormStateFromProps} = props; // looks like { filter1: {...filter1State}, filter2: {...filter2State}, ...}


const {..., control, watch, unregister} = useForm({..., values: savedFormStateFromProps})

const formValues = watch()

return <form ...>
{
Object.keys(formValues).map((k) => 
  <div key={k}>
    <MyCustomFilterController control={control} name={k}/>
    <button onClick={() => unregister(k) }>
      Delete filter
    </button>
  </div>)

}
</form>

Are there any risks with taking this approach? I've been encountering some odd bugs that i think may be due to some asynchronously triggered renders or maybe race conditions. Also ran into an issue where the props saved form state were being mutated when calling unregister (the value was removed from the props object itself). Im unsure if this is literally whats happening, or if theres just some intermediate renders occurring which somehow result in the form updating in this way, but it is bizzarre.

All this to say, is there a better approach for the behavior i am trying to produce here? Should i be using field array instead? Something else?

[ktalalykin]

i think few things to note here

1. you need to provide a key prop to a div inside the map https://legacy.reactjs.org/docs/lists-and-keys.html
2. im not sure exactly how unregister works, but maybe try to use setValue, but it might be heavy for your purposes. Unless you have strict validation, setValue would make more sense i think
3. i would use useFieldArray and use remove function it provides

[paulleonartcalvo]

Thanks for the reply!

I forgot the key while pseudocoding lol, ill make sure to update that.
I opted for unregister because apparently setValue(undefined) doesn't actually do exactly that, so id have to set it to null or something and then filter null values out of the end filter state. With unregister i can actually remove the key itself from the payload which is what i want (only the filters that are being used).

I guess fieldArray would be the next logical approach; it just annoys me slightly that iirc you cant use it on the root of the form, so id have to have a key and then onSubmit take the value of that key (the array) and reverse that for the values in useForm. I guess that's not the worst thing in the world though