Update interaction(button) Once its clicked discord.js

Question

I am using discord.js v13(latest) I want to make button disabled, change its label, and style to danger once button clicked by user but my code Doesn't update the btn with new value. My code is given below and bombslist array is a random since, the code gonna be too much to put on stackoverflow so, i removed the random block gen part.

const bombslist = ["block_2", "block_23"]


                const row1 = new MessageActionRow()
            .addComponents(
                new MessageButton()
                    .setCustomId('block_1')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_2')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_3')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_4')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_5')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),       
            );
      const row2 = new MessageActionRow()
            .addComponents(
                new MessageButton()
                    .setCustomId('block_6')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_7')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_8')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_9')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),
        new MessageButton()
                    .setCustomId('block_10')
                    .setLabel('⛏️')
                    .setStyle('SECONDARY'),       
            );
//removed some rows because stackoverflow "It looks like your post is mostly code; please add some more details."      
            );
      const embed = new MessageEmbed()
      .setTitle("Mine")
.setColor (embedcolor)   
        
        .setDescription(`Click the block to mine if you got bomb you will lose Total bomb : ${numofbomb}`)
     message.channel.send ({embeds : [embed], components : [row1, row2, row3, row4, row5]})
                                                            

                const collector = message.channel.createMessageComponentCollector({ componentType: 'BUTTON', time: 30000 });

collector.on('collect', i => {
    if (i.message.author.id === client.user.id) {
     if(bombslist.includes(i.customId)){
                  i.component.setStyle("DANGER")            
i.component.setLabel(bomb_emoji)   
i.component.setDisabled(true)
      i.update({embeds : [embed], components : [row1, row2, row3, row4, row5]
                  })
        }} else {
i.reply ({content: "You can't click this button this buttons Use command r-mine to try it yourself", ephemeral: true})
                    }
});
  
const bomb_emoji = "💣"

Answer 1

This happens because you don't update the actual components you later add to the response message.

As far as I can tell, the only way to change buttons like this, is to create an identical button, change that buttons color, etc., add it to a new row and use that one in the response

1. Create a new row to store your buttons in
2. Create identical buttons as before, but change any properties on buttons you'd like.
3. Add this new row to the new message instead.
   You can of course replace the old rowX variable, too.

Here is an example where we update the first button in the first row to be red and disabled:

collector.on('collect', i => {
    if (i.message.author.id === client.user.id) {
        if(bombslist.includes(i.customId)){
            row1 = new MessageActionRow()
            .addComponents(
                new MessageButton()
                    .setCustomId('block_1')
                    .setLabel('??')
                    .setStyle('DANGER'),
                    .setDisabled(true)
                new MessageButton()
                    .setCustomId('block_2')
                    .setLabel('??')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('block_3')
                    .setLabel('??')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('block_4')
                    .setLabel('??')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('block_5')
                    .setLabel('??')
                    .setStyle('SECONDARY'),       
            );
            i.update({embeds : [embed], components : [row1, row2, row3, row4, row5]})
        }
    }

});