useFiledArray saves the previous form field value even if the component is not available in the dom

[anupkum100]

I am working on a solution where I have a dropdown and depending on dropdown value selection I have to show dropdown or input or any other form field.
I am able to achieve the solution but the values of the previously added or selected value remains as it is.

eg reference
https://codesandbox.io/s/usefieldarray-typescript-v7-forked-g66wkr?file=/src/App.tsx

I have created a dropdown with option list and input.
If I select list it should show another dropdown --> WORKING
If I select option 1 it should be selected --> WORKING
If I select input it should show input box --> WORKING
Input box should have default value as "" --> NOT WORKING (It shows [object][object])

[leapful]

@anupkum100

You need to put key prop on input element in order to force re-render the input element with new value.

Working demo: https://codesandbox.io/s/usefieldarray-typescript-v7-forked-9x7rp4?file=/src/App.tsx

[anupkum100]

Looks good but when I try to delete the first row which is having input selected as dropdown option the second one becomes empty .

eg

If I select input from dropdown1 it should show an input --> WORKING I can enter some value
Enter some value in the Input lets say : input1 Value

Click on Add Row
If I select input from dropdown2 it should show an input --> WORKING I can enter some value
Enter some value in the Input lets say : input2 Value

Remove Row 1

Dropdown2 value should remain Input : WORKING
Input 2 value should remain input2 Value : NOT WORKING // it becomes blank