How to `update() ` the same interaction multiple times?

So I have this simple slash command that sends 3 buttons:
hello
,
hi
, and
wassup

async function execute(interaction)  {
  const hello = new ButtonBuilder()
    .setCustomId('hello')
    .setLabel('Say Hello')
    .setStyle(ButtonStyle.Primary);
  
    const hi = new ButtonBuilder()
    .setCustomId('hi')
    .setLabel('Say Hi')
    .setStyle(ButtonStyle.Primary);
  
    const wassup = new ButtonBuilder()
    .setCustomId('wassup')
    .setLabel('Say wassup')
    .setStyle(ButtonStyle.Primary);
  
  const row = new ActionRowBuilder().addComponents(hello, hi, wassup);
  
   const response = await interaction.reply({
    content: 'Choose your messages',
    components: [row],
  });
  
  const userChoice = await response.awaitMessageComponent();
    switch (userChoice.customId) {
      case "hello": return await userChoice.update("hello");
      case "hi": return await userChoice.update("hi")
      case "wassup": return await userChoice.update("wassup")
    }
};


When a user click one of the buttons, the message should change into the chosen message, which works as intended.

However, it only work once. The next click will result in "Interaction failed". I tried duplicating the
awaitMessageComponent()
function call but it still doesn't work.

Any idea?
ksnip_20230821-115412.jpg
ksnip_20230821-115436.jpg
ksnip_20230821-115455.jpg
Was this page helpful?