React hook form UseFieldArray filter already selected items and remove() problem

ubuntu_ulysses

I have a project on Nextjs and I have a react-hook-form with useFieldArray . At the start there is just one html select that contain every "article". I want that if i select an article, the next generated html select (with useFieldArray append() ) contain every article except all the articles already selected before. I try with: .filter((articolo) => { // Filter already selected articles return !dettaglioArticoliWatch.some( (dettaglio, idx) =>...

Originally asked by GM02 on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

There's nothing wrong with your current state. remove() will do the job correctly; you are losing the view but retaining the values. I have successfully recreated your component with three rows for article 1, 2 and 3. Then I deleted row two. After deleting it using remove(1) , getValues("rows") returned [{"id":"1"},{"id":"3"}] , which was correct, and the second select still had <option value="3"> available in it. But the DOM select read "" . The problem lies with your registering the select and filtering the options. It is not caused by either of these individually: Row Markup After Remove(1) Registered + Filter ["1",""] Registered + No Filter ["1","3"] Controller + Filter ["1","3"] The...

Full answer by Chinedu Otutu: https://stackoverflow.stackexchange.com/a/80006993 (CC BY-SA 4.0).

Need it done for your business? UphillTech.