reactjsreact-nativeactionreducers

React Reducer - Add elements to existing element


i want that new updates get continuous added to "kanbanboard" but instead the old value get signed over. enter image description here

ACTION-Function

  export const editExpense = (id, updates) => ({
  type: "EDIT_EXPENSE",
  id,
  updates
});

REDUCER-FUNCTION

case "EDIT_EXPENSE":
  return state.map((expense) => {
    if (expense.id === action.id) {
      return {
        ...expense,
        kanbanboard:[{...action.updates}]
      };
    } else {
      return expense;
    };
  });

Thank you for helping.


Solution

  • I cant see the entire reducer but it looks like you are explicitly overriding the old value. Change it to:

    case "EDIT_EXPENSE":
      return state.map((expense) => {
        if (expense.id === action.id) {
          return {
            ...expense,
            kanbanboard:[
             ...expense.kanbanboard, // you have to add your old state here
             { 
               ...action.updates
            }]
          };
        } else {
          return expense;
        };
      });