Sorting the array of object in reducer state

Question

I want to update the react state using redux but data is not sorting correctly

Original Array

    "sections": [
        {
            "id": 8,
            "user_id": 1,
            "field_type_id": 8,
            "section_id": 3,
            "value": "+96******",
            "type": "phone",
            "url": "tel:",
            "icon": "phone"
        }
     {
            "id": 9,
            "user_id": 1,
            "field_type_id": 8,
            "section_id": 3,
            "value": "[email protected]",
            "type": "email",
            "url": "",
            "icon": "email"
        }
    ]

I am updating the state using this code.

state = { ...state,sections :[ ...state.sections.filter(
                (section) => section.id !== action.payload.section.id
              ) , action.payload.section ]  }
            return state

After updating the array objects are getting reversed

   "sections": [
       {
            "id": 9,
            "user_id": 1,
            "field_type_id": 8,
            "section_id": 3,
            "value": "[email protected]",
            "type": "email",
            "url": "",
            "icon": "email"
        }
        {
            "id": 8,
            "user_id": 1,
            "field_type_id": 8,
            "section_id": 3,
            "value": "+91344******",
            "type": "phone",
            "url": "tel:",
            "icon": "phone"
        }
    ]

How can i stop the array reversing?

I have updated the code . Please check . I am using filter to update "sections" but ut pushing object in last index.. how can i replace the index ? — Inderjit SIngh
– Inderjit SIngh, Commented Jan 31, 2022 at 8:27
@InderjitSIngh Normally you use splice for that. It not related to react or redux. It's just plain vanilla JS. — super
– super, Commented Jan 31, 2022 at 8:32
@super you don't mutate objects in react reducers. Filter preserves the order of the array so the problem is whatever the heck you are doing here ...state,sections :[ ...state.sections.filter( ? Are you using a spread as an object key here ? I'm surprised this is even valid syntax. — nlta
– nlta, Commented Jan 31, 2022 at 8:33
Yeah agreed @nlta. It would be good to know what specifically are you trying to achieve? — bopbopbop
– bopbopbop, Commented Jan 31, 2022 at 8:35

Drew Reese · Accepted Answer · 2022-01-31 09:02:04Z

1

If you are simply wanting to update an element at a specific index then just use Array.prototype.map to map the previous array to the next, updating the specific element when it's reached. Array order is maintained.

const nextState = {
  ...state,
  sections: state.sections.map(
    section => section.id === action.payload.section.id
      ? action.payload.section
      : section
  ),
};
return nextState;

answered Jan 31, 2022 at 9:02

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hafid Denguir · Accepted Answer · 2022-01-31 09:03:11Z

0

You can use one of 2 :

 // filter
  const state = {
    ...state,
    sections: state.sections.filter(
      (section) => section.id !== action.payload.section.id
    ),
  };
  
  // Update
  const state = {
    ...state,
    sections: state.sections.map((section) =>
      section.id !== action.payload.section.id
        ? { ...section, url: 'new Value' }
        : section
    ),
  };

answered Jan 31, 2022 at 9:03

Hafid Denguir

9628 silver badges12 bronze badges

Collectives™ on Stack Overflow

Sorting the array of object in reducer state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related