Updating a nested object within a nested array in React/Redux

Viewed 168

I'm having trouble updating a nested object that is within a nested array using redux/react.

The data structure being displayed looks like this:

incidentEnforcementActions: [
 {
   eaId: 154,
   incidentNumber: 1066,
   eaCode: "WTTC",
   enforcementActionStatusList: [
    {
      eaStatusId: 1,
      eaId: 154
     ... more fields in here
     },
   {
      eaStatusId: 2,
      eaId: 154
     ... more fields in here
     },

],
{
   eaId: 155
   incidentNumber: 1067,
   eaCode: "FTC",
   enforcementActionStatusList: [
    {
      eaStatusId: 3,
      eaId: 155,
     ... more fields in here,
     },
   {
      eaStatusId: 4,
      eaId: 155,
     ... more fields in here
     },

],
}]

In this case one of the nested objects needs to be edited, for example:

 {
      eaStatusId: 1,
      eaId: 154
     ... more fields in here
     }

The edited object gets sent to the server and its getting saved but then I get an error at the reducer level.

First, I tried this and got an error about mutating state:

 //clone actions list
      const cloneActionList = [...state.incidentEnforcementActions];
      //find matching index
      let getStatusIndex = cloneActionList.forEach((elem) => {
        if (elem.eaId === action.payload.eaId) {
          //loop through that items status list
          let cloneStatus = [...elem.enforcementActionStatusList];
          let statusIndex = cloneStatus.findIndex((stat) => stat.eaStatusId === action.payload.eaStatusId);
          cloneStatus.splice(statusIndex, 0, action.payload);
          elem.enforcementActionStatusList.splice(0, elem.enforcementActionStatusList.length, cloneStatus);
        }
      });

Then I read this post and the redux documentation and tried the code below. I think this would work but the issue is in the code below I'm referencing ids when I need to be referencing indexes. Not sure a clean way to do that.

  return {
        ...state,
        isSubmittingEnfAction: true,
        incidentEnforcementActions: {
          ...state.incidentEnforcementActions,
          [action.payload.eaId]:{
            ...state.incidentEnforcementActions[action.payload.eaId].enforcementActionStatusList,
            [action.payload.eaStatusId] :
            {
              ...state.incidentEnforcementActions[action.payload.eaId].enforcementActionStatusList[action.payload.eaStatusId],
              enforcementActionStatusList: action.payload
            }
          }
          }
        }

UPDATE:

I've tried the following code based on this post, but it only returns the parent item:

 let parentIndex = state.incidentEnforcementActions.findIndex(
        (enfaction) => enfaction.eaId === action.payload.eaId
      );
   
      let childIndex = state.incidentEnforcementActions[parentIndex].enforcementActionStatusList.findIndex(
        (status) => status.eaStatusId === action.payload.eaStatusId
      );

 ...state,
        incidentEnforcementActions: [
          ...state.incidentEnforcementActions.slice(0, parentIndex),
          {
            ...state.incidentEnforcementActions[parentIndex],
            enforcementActionStatusList: [
              ...state.incidentEnforcementActions[parentIndex].enforcementActionStatusList.slice(
                childIndex, 1,
                action.payload
              )
            ]
          }
        ],
0 Answers
Related