Update a specific objects values in an array of objects redux

Question

My goal is to update the animatedPhotoUrl value for chatId #1 (or the first object in the chats array.

const chats = [

  {"admin": "590", 
  "animatedPhotoUrl": "", 
  "chatId": "1"}, 

  {"admin": "680", 
   "animatedPhotoUrl": "", 
   "chatId": "2"},
  {"admin": "420", 
   "animatedPhotoUrl": "", 
   "chatId": "2"}

]

However, when I console.log(chats) after I update in the reducer, I get the error:

[undefined, undefined]

Here is my dispatch:

dispatch({
          type: "UPDATE_CHAT_PROFILE_PICTURE_URL",
          payload: {
            profilePictureUrl: res.imageUrl,
            animatedPhotoUrl: "",
            chatId: chat.chatId,
          },
        });

And here is the code in my reducer:

 case "UPDATE_CHAT_PROFILE_PICTURE_URL":
      return {
        ...state,
        chats: state.chats.map((chat) => {
          chat.chatId === action.payload.chatId
            ? {
                ...chat,
                animatedPhotoUrl: action.payload.animatedPhotoUrl,
              }
            : chat;
        }),
      };

d-dripz · Accepted Answer · 2023-01-02 20:36:29Z

1

You need to add return here:

chats: state.chats.map((chat) => {
  return chat.chatId === action.payload.chatId
    ? {
        ...chat,
        animatedPhotoUrl: action.payload.animatedPhotoUrl,
      }
    : chat;
}),

or you need to drop braces to get implicit return:

chats: state.chats.map((chat) => 
  chat.chatId === action.payload.chatId
    ? {
        ...chat,
        animatedPhotoUrl: action.payload.animatedPhotoUrl,
      }
    : chat;
),

edited Jan 2, 2023 at 20:36

d-dripz

851 silver badge7 bronze badges

answered Jan 2, 2023 at 20:21

skyboyer

24k7 gold badges65 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

Update a specific objects values in an array of objects redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related