替换对象数组中的键值

Question

I'm working on a project that is a basic message app. basically i have created an array of objects that allows me to see pre built messages. Then i should be able to click a clear all button and clear all of the messages that are being displayed by looping through the array of objects. this is what i have so far in my messageData.js

const messages = [
  {
    id: 'message1',
    message: 'Hello everyone! Welcome to hell',
    userId: 'user1',
  },
  {
    id: 'message2',
    message: 'Yall are weirdos!',
    userId: 'user3',
  },
  {
    id: 'message3',
    message: 'Hey! I think everyone is awesome!',
    userId: 'user2',
  },
  {
    id: 'message4',
    message: 'Thanks for saying that my friend.',
    userId: 'user4',
  },
  {
    id: 'message5',
    message: 'Hey buddy, what is up?',
    userId: 'user4',
  },
];

const getMessages = () => messages;

and what i want to do is basically on click allow the messages key value to be changed to an empty string onclick so that i get rid of the displayed messages without getting rid of the object so that i can later push new messages into these key values.

I started to write this but i seem to be missing something..

const clearBtnFunction = () => {
  messages.splice(1, '');
};

i'll be calling the event listener on my main.js file so i'm not super worried about that part yet. I just want to know the proper syntax for replacing the key value in the array if thats possible.

Answer 1

const clearBtnFunction = () => {
  messages.foreach( ( message ) => {
      message.message = "";
  });
};

or with a for loop

const clearBtnFunction = () => {
  for( let i =0; i < messages.length; i++) {
      messages[i].message = "";
  }
};

Answer 2

Here is what i opted for. I placed this function, not in the messagesData.js but in the messages.js where i'm building the domstring

const clearBtnFunction = (e) => {
 e.preventDefault();
 const messages = message.getMessages();
 messages.splice(0, messages.length);
 messageBuilder(messages);
};