issue: Remove feature not working properly on useFieldArray

[charmingjae]

Version Number

codesandbox: 7.51.0 , local: 7.50.1

Codesandbox/Expo snack

Codesandbox Link

Steps to reproduce

Hi, this issue is about the feature to add(append) and delete(remove) data using useFieldArray.
Thank you so much for taking the time to look at this issue. I working very hard to resolve this issue and would appreciate any feedback you can provide.

• Currently using a component in the Material UI (MUI) to receive data input.
  • Using multiple components such as Select, Autocomplete, as well as TextInput. The provided codesandbox only uses TextInput.
• Using the Controller component to control the component without using register.
• The control used in useFieldArray uses the control in useFormContext.

If look at the codesandbox provided above, we'll see that it has two main parts:

1. Input, where we can enter data
2. Button, where we can add or delete data.

Below is the order in which we can view issues.

1. When you connect to codesandbox, you'll see the following elements.
   

2. Enter a value from 1 to 3 in the topmost Input element and press the Add button on the right to add a row.
   A new row is created below in the order you entered the values.
   

3. Delete the top row of the new rows (the row with the number 1) to the row with the number 3.
   

4. When you try to delete the row with the number 2 entered, you can see that the row is not deleted and is changed to a value of the number '3'.
   

Expected behaviour

Expected behaviour: Expecting things to function normally when adding and deleting data.

1. With all data added.

   3           <-- Add row (Always displayed)
   
   1           <-- Edit row (Can be deleted)
   2           <-- Edit row (Can be deleted)
   3           <-- Edit row (Can be deleted)

2. Delete 1 (index: 0)

   3           <-- Add row (Always displayed)
   
   2           <-- Edit row (Can be deleted)
   3           <-- Edit row (Can be deleted)

3. Delete 2 (index: 0)

   3           <-- Add row (Always displayed)
   
   3           <-- Edit row (Can be deleted)

4. Delete 3 (index: 0)

   3           <-- Add row (Always displayed)

But now, the functionality works as follows.

1. With all data added.

   3           <-- Add row (Always displayed)
   
   1           <-- Edit row (Can be deleted)
   2           <-- Edit row (Can be deleted)
   3           <-- Edit row (Can be deleted)

2. Delete 1 (index: 0) Okay, work properly.

   3           <-- Add row (Always displayed)
   
   2           <-- Edit row (Can be deleted)
   3           <-- Edit row (Can be deleted)

3. Delete 2 (index: 0) Not work properly.

   3           <-- Add row (Always displayed)

   3           <-- Edit row (Can be deleted) - Change to 3 from 2
   3           <-- Edit row (Can be deleted)

What browsers are you seeing the problem on?

Chrome

Relevant log output

1. Fully data added

Edit row data :  {test: '1', id: '93075968-6946-44ab-8f89-f8d77950f6b8'}
Edit row data :  {test: '2', id: 'e1b8e305-e7d9-4c8f-98d7-fcc0ec43ef22'}
Edit row data :  {test: '3', id: 'b288835c-e277-47eb-85e9-3c9ed5eb4245'}

2. Delete '1'

Edit row data :  {test: '2', id: 'e1b8e305-e7d9-4c8f-98d7-fcc0ec43ef22'}
Edit row data :  {test: '3', id: 'b288835c-e277-47eb-85e9-3c9ed5eb4245'}

3. Delete '2' - New unintended rows added below

Edit row data :  {test: '3', id: 'b288835c-e277-47eb-85e9-3c9ed5eb4245'}
Edit row data :  {test: '3', id: '76591c37-e6ca-4cb3-b79e-b82e1a46be65'}

Code of Conduct

• I agree to follow this project's Code of Conduct

[devLucasMoraes]

I have the same problem as you, I racked my brain all night thinking it was some implementation error on my part

[ramiKang]

Hello! I was thinking about the same error and somehow found a solution. Please refer to the method below!

If you call a component using fields.map, put the key field.id in the component in the map.
And set the key to index in the top tag inside the component.

If you are using fields.map to directly invoke a component instead of invoking it, set the key value to field.id !

I'll explain using the sandbox above

If you call a component in fields.map

# src/page/TestPage/index.jsx
{fields.map((field, index) => {
        return (
          <EditRow key={field.id} data={field} rowIdx={index} remove={remove} />
        );
      })}

# src/component/EditRow/index.jsx
return (
    <div
      key={rowIdx} //  << Please add key
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "row",
      }}
    >
           # ... code
    </div>

If you are creating content directly within fields.fields.map

# src/page/TestPage/index.jsx
{fields.map((field, index) => {
        return (
          <div key={field.id}>
               # code
          </div>
        );
      })}

I did this. I hope this solution will help you

[charmingjae]

@devLucasMoraes @ramiKang

First, thank you for sharing your interest in my problem.
The component's key must be assigned a unique value. However, index is not a unique value when render in loop(map), but it works fine when I assign index to key as shown in the answer above. That's weird. Is there another solution?

[keithics]

@ramiKang you saved me days with this "solution".