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": "test@gmail.com",
"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": "test@gmail.com",
"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?
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;
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
),
};