React Nested Object State management issue-CodePudding

This is the initial state data

[
 {
  data: Array(3)
    0: {validationID: 'CAe6ao89NqST2s1xF4jBe', name: '', conditionType: 'Const', conditionCat: 'if', value: ''}
    1: {validationID: 'fm_d94bcxfEL_fZqrXI2s', name: '', conditionType: 'Const', conditionCat: 'then', value: ''}
    2: {validationID: 'yI4mmDRwYpyb50b87sZTN', name: '', conditionType: 'Const', conditionCat: 'else', value: ''}
  id: "4iVnSR2nbzWMZNcPjlEg5"
 }
]

My action payload is like

{id: '4iVnSR2nbzWMZNcPjlEg5', name: 'test', validationID: 'CAe6ao89NqST2s1xF4jBe'}

And it should update my state for id 4iVnSR2nbzWMZNcPjlEg5 and validationId CAe6ao89NqST2s1xF4jBe

{validationID: 'CAe6ao89NqST2s1xF4jBe', name: 'test', conditionType: 'Const', conditionCat: 'if', value: '', …}

My below reducer.ts consoles the proper state, but I am missing something in return that leads to eventually it doesn't update the state

export const validationReducer = (
  stateValidation: KeyedValidationProperty[],
  action: PropertyAction
) => {
    switch (action.type) {
        case PropertyActions.ADD_CONDITIONAL_PROPERTY:
          return stateValidation.map((x) => {
            if (x.id === action.payload.id) {
              return x.data.map((e) => {
                if(e.validationID === action.payload.validationID){
                  console.log({ ...e, ...action.payload })
                  return { ...e, ...action.payload };
                }
               return e;
              })
            }
            return x;
          });
    
        default:
          return stateValidation;
      }
   }

This only returns below object, dropping the id and data

  0: Array(3)
    0: {validationID: 'CAe6ao89NqST2s1xF4jBe', name: 'test', conditionType: 'Const', conditionCat: 'if', value: ''}
    1: {validationID: 'fm_d94bcxfEL_fZqrXI2s', name: '', conditionType: 'Const', conditionCat: 'then', value: ''}
    2: {validationID: 'yI4mmDRwYpyb50b87sZTN', name: '', conditionType: 'Const', conditionCat: 'else', value: ''}

CodePudding user response：

You're missing a return here x.data.map((e) => {

Should be return x.data.map((e) => {

Also you're missing a return outside the nested if

If your condition is not true, you're not returning anything

Should be

return x.data.map((e) => {
  if(e.validationID === action.payload.validationID){
    console.log({ ...e, ...action.payload })
    return { ...e, ...action.payload };
  }
  return e;
})

CodePudding user response：

I was missing the property spread notation ... which resulted only returning the map return object

return stateValidation.map((x) => {
        if (x.id === action.payload.id) {
          return {
            ...x,
            data: x.data.map((e) => {
              if (e.validationID === action.payload.validationID) {
                return { ...e, ...action.payload };
              }
              return e;
            }),
          };
        }
        return x;
      });