Update an object in a array - reactjs

Question

I'm calling an api request to update (edit) values in my array of objects. But the issue is i can only see the updated value after page refresh. To see the updated (edited) values instantly i'm trying to insert the updated values to my object locally (Only if the request is executed successfully). My approach is as follows

Action

            .then(res => {
                if (res.data.success === true) {
                    const updatedBillingPlan = {
                        "billingId":data.billingId,
                        "name": data.name,
                        "rateKWh": data.rateKWh,
                        "rateMin": data.rateMin,
                        "rateTransaction": data.rateTransaction
                    }
                    dispatch(updateBillingPlansSuccess(updatedBillingPlan));
                } else {
                    alert("error");
                }
            })

Reducer

            case UPDATE_BILLING_PLANS_SUCCESS:

            let updatedBillingArray = (Here i need to include action.data to billingData )

            return update(state, {
                billingData: updatedBillingArray,
            })

I'm trying to use immutability-helper library.

How would i go about this?

For example when i delete a record, to display the newest array with the deleted record , i'm doing something like this.

           case DELETE_MODAL_SUCCESS:
            let updatedBillingArray = state.billingData.filter(property => property.billingId !== action.data);
            return {
                ...state,
                billingData: updatedBillingArray,
                billingDeleteToast: true
            }

I want to do the same with update as well.

Tudor Constantin · Accepted Answer · 2019-11-29 08:45:30Z

1

assuming billingID is unique among the billing plans, you could use that to update the proper element in the array:

        case UPDATE_BILLING_PLANS_SUCCESS:

        let updatedBillingArray = state.billingData.map(bp => if (bp.billingId === action.data.billingId) return action.data else return bp);

        return update(state, {
            ...state,
            billingData: updatedBillingArray,
        })

answered Nov 29, 2019 at 8:45

Tudor Constantin

26.9k7 gold badges54 silver badges73 bronze badges

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

2 Comments

CraZyDroiD Over a year ago

My array has several objects. So for example say i edited the 7th object. I just want to update the 7th object with the edited values

Tudor Constantin Over a year ago

then you'd have to send both the updated billing plan and its position to the reducer and then something like:

let updatedBillingArray = [...state.billingData];   updatedBillingArray[action.data.position] = action.data.updatedBillingPlan;

Collectives™ on Stack Overflow

Update an object in a array - reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related