function remove of react-hook-form removing last element instead of correct one

user_19625906 0
Viewed 163

i am trying to use useFieldsArray from react-hook-form, but when I click on the button to delete, instead of deleting the correct element it always deletes the last one. can someone more experienced give me some advice? I don't understand what I'm doing wrong. Thanks in advance.

export const isThisAFieldsArrayContext = React.createContext(false)

export default function FieldsArray({
control,
formNamePrefix,
register,
inputsToRender,
addNewDisabled = false,
watchConfig,
...props
}) {
const classes = useStyles()
const { append, remove } = useFieldArray({
    control,
    shouldUnregister: false,
    name: formNamePrefix,
})

const additionalProps = useWatchForAdditionalProps(watchConfig)

function handleRemove(index) {
    remove(index)
}

return (
    <isThisAFieldsArrayContext.Provider value={true}>
        <Grid item xs={12}>
            <List>
                {control.getValues(formNamePrefix)?.map((item, index) => {
                    console.log({ item })
                    return (
                        <ListItem key={index} className={classes.listItem}>
                            <DynamicFormFields
                                {...props}
                                register={register}
                                fieldsKey={`${formNamePrefix}.${index}`}
                                formFields={inputsToRender}
                                control={control}
                                // defaultValue={item.defaultValue}
                            />
                            <DeleteButton
                                variant="contained"
                                onClick={() => handleRemove(index)}
                                aria-label="delete"
                                className={classes.deleteButton}
                            >
                                <DeleteIcon color="secondary" fontSize="small" />
                            </DeleteButton>
                        </ListItem>
                    )
                })}
            </List>
            <Button
                variant="contained"
                onClick={() => append({})}
                aria-label="add"
                color="secondary"
                className={classes.addButton}
                disabled={addNewDisabled || additionalProps.disabled}
            >
                <AddIcon color="primary" />
            </Button>
        </Grid>
    </isThisAFieldsArrayContext.Provider>
)
react-hook-form reactjs
1 Answers

useFieldArray returns fields

const { fields, ... } = useFieldArray(...)

Use it to map

fields.map((item, index) => {
// there is an 'id' in item. Use it for key!
    return (
       <ListItem key={item.id}>
          ...
          <button onClick={() => handleRemove(index)}>Delete</button>
          ...
       </ListItem>
    )

})

The value of 'formNamePrefix' has to be an array of objects. Example:

useForm({
   defaultValues: {
      [formNamePrefix]: [{name: 'name1'}, {name: 'name2'}, ...]
   }
})
user_133112730
Related