update array inside object inside another array

Question

this is my reducer

let initialState = [
  { name: 'john', messages: [{ message: "hi" }] },
  { name: 'max', messages: [{ message: "howdy" }] },
  { name: 'alex', messages: [{ message: "hello" }] },
  ...
];

const Messages = (state = [], action) => {
  switch (action.type) {
    case "MESSAGES":
      return [...state, ...action.payload];
    case "UPDATE_ALEX_MESSAGES":
      // HOW TO UPDATE????
    default:
      return state;
  }
};

export default Messages;

how to update alex's messages and push another object to it? (commented part of the above code)

Note: alex's position is not stable and it may change. so something like state[2] is not what I'm looking for. Something more like state.find(x => x.name === 'alex') is more like it..

Yousaf · Accepted Answer · 2021-05-10 11:58:48Z

The map() method and the spread syntax can help you achieve the desired result.

Using the map() method, iterate over the state array and inside the callback function, check if the current user object's name is "alex", if it is, update the current object's messages property by assigning a new array to it and using the spread syntax to copy the existing messages and then also add the new message in the array.

case "UPDATE_ALEX_MESSAGES":
  return state.map((user) => {
      if (name === "alex") {
         user.messages = [...user.messages, newMessage];
      }

      return user;
  });

You could also avoid mutating the existing object by returning a new object inside the if block.

case "UPDATE_ALEX_MESSAGES":
  return state.map((user) => {
      if (name === "alex") {
         return { ...user, messages: [...user.messages, newMessage] };
      }

      return user;
  });

Ideally, you would pass the name of the user in the payload of the action, so the following condition

if (name === "alex") { .. }

will become

if (name === action.payload) { .. }

Rogier de Ruijter · Accepted Answer · 2021-05-10 11:46:12Z

0

I have used this npm package to solve this problem https://www.npmjs.com/package/immer. It is a super useful tool that helps reduce boilerplate code

answered May 10, 2021 at 11:46

Rogier de Ruijter

1,0861 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

update array inside object inside another array

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