Remove item from redux form field array by its name and not index

user_3815432 0
Viewed 153

Redux Form has FieldArray field:

https://redux-form.com/6.0.0-rc.3/docs/api/fieldarray.md/

I am trying to delete multiple of items from it but remove() method only works for a single removal perhaps because each time the fields get one item smaller and the index determined by me is bigger than the fields array:

      <MultiSelect
          placeholder="Delete project group"
          onChange={(v) => {
            const diff = difference(addedGroups, v)
            if (!isEmpty(diff)) {
              const groupToDelete = diff[0]
              forEach(projectsByGroup[groupToDelete], p => removeElement(addedProjects.indexOf(p)))
              deleteGroup(groupToDelete)  
          }}  
          options={projectGroupNames}
          value={addedGroups}
          inline
    />

Where removeElement is fields.remove FieldArray function. How to remove correctly multiple items from FieldArray selectively?

Update:

I have also tried to use change in my reducers like that:

import { change } from 'redux-form'

export const deleteVariantSearchProjectGroup = (projectGroupGuid) => {
  return (dispatch, getState) => {
    const state = getState()
    const projectsInGroup = state.projectsByProjectGroup[projectGroupGuid]
    const allProjectFields = getProjectsFamiliesFieldInput(state)
    const remainingProjectFields = allProjectFields.filter(projectField => !projectsInGroup.includes(projectField.projectGuid))
    change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields)
    dispatch({ type: UPDATE_VARIANT_SEARCH_ADDED_GROUPS, newValue: without(getState().variantSearchAddedProjectGroups, projectGroupGuid) })
  }
}

I get correctly an array remainingProjectFields but then change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields) does not do anything.

redux-form redux
1 Answers

I was not able to actually find a way to remove fields one by one with fields.remove but ultimately I solved it by using a reducer and updating Redux Form state using change method:

import { change } from 'redux-form'

export const deleteVariantSearchProjectGroup = (projectGroupGuid) => {
  return (dispatch, getState) => {
    const state = getState()
    const projectsInGroup = state.projectsByProjectGroup[projectGroupGuid]
    const allProjectFields = getProjectsFamiliesFieldInput(state)
    const remainingProjectFields = allProjectFields.filter(projectField => !projectsInGroup.includes(projectField.projectGuid))
    dispatch(change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields))
    dispatch({ type: UPDATE_VARIANT_SEARCH_ADDED_GROUPS, newValue: without(getState().variantSearchAddedProjectGroups, projectGroupGuid) })
  }
}

and deleteVariantSearchProjectGroup = deleteGroup in the very first jsx code snippet in the question.

user_38154320
Related