Trying to disable a button but an error popped up

Question

I am making a help command, but I want to disable it when the embed title is the same as the button label. Except this error pops out:

C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord Bots\Testing3.JS\node_modules\discord.js\src\rest\RequestHandler.js:350 throw new DiscordAPIError(data, res.status, request); ^

DiscordAPIError: Invalid Form Body components[0]: The specified component type is invalid in this context components[1]: The specified component type is invalid in this context at RequestHandler.execute (C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord Bots\Testing3.JS\node_modules\discord.js\src\rest\RequestHandler.js:350:13) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async RequestHandler.push (C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord Bots\Testing3.JS\node_modules\discord.js\src\rest\RequestHandler.js:51:14) at async MessageManager.edit (C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord Bots\Testing3.JS\node_modules\discord.js\src\managers\MessageManager.js:132:15) { method: 'patch', path: '/channels/956427421073158194/messages/965228940685897748', code: 50035, httpStatus: 400, requestData: { json: { content: undefined, tts: false, nonce: undefined, embeds: [ { title: 'Economy', type: 'rich', description: null, url: null, timestamp: null, color: null, fields: [ [Object], [Object], [Object], [Object] ], thumbnail: null, image: null, author: null, footer: null } ], components: [ { custom_id: 'econ', disabled: true, emoji: { animated: false, name: '💵', id: null }, label: 'Economy', style: 1, type: 2, url: null }, { custom_id: 'info', disabled: false, emoji: { animated: false, name: '📃', id: null }, label: 'Info', style: 2, type: 2, url: null } ], username: undefined, avatar_url: undefined, allowed_mentions: undefined, flags: 0, message_reference: undefined, attachments: undefined, sticker_ids: undefined }, files: [] } }

Code:

    if (cmd === "help") {

        const econ = new Discord.MessageButton()
        .setCustomId('econ')
        .setEmoji('💵')
        .setLabel('Economy')
        .setStyle('PRIMARY')
        const info = new Discord.MessageButton()
        .setCustomId('info')
        .setEmoji('📃')
        .setLabel('Info')
        .setStyle('SECONDARY')

        const row = new Discord.MessageActionRow().addComponents([econ, info]);

        let helpMsg = await message.channel.send({
            embeds: [
                {
                    title: "Economy",
                    fields: [
                        {
                            name: `\`${cPrefix}bal | balance [user]\``,
                            value: 'Displays your balance or a user\'s balance.'
                        },
                        {
                            name: `\`${cPrefix}dep | deposit <amount>\``,
                            value: 'Deposits a specified amount of cash to your bank.'
                        },
                        {
                            name: `\`${cPrefix}with | withdraw <amount>\``,
                            value: 'Withdraws a specified amount of cash to your wallet.'
                        },
                        {
                            name: `\`${cPrefix}addcoins <user> <amount>\``,
                            value: 'Adds a specified amount of cash to a user. (Administrator)'
                        }
                    ]
                }
            ],
            components: [row]
        });

        const collector = helpMsg.createMessageComponentCollector({
            componentType: 'BUTTON',
            time: 60000
        });

        collector.on('collect', async (b) => {
            if (b.user.id === message.author.id) {
                if (b.customId === 'econ') {
                    helpMsg.edit({
                        embeds: [
                            {
                                title: "Economy",
                                fields: [
                                    {
                                        name: `\`${cPrefix}bal | balance [user]\``,
                                        value: 'Displays your balance or a user\'s balance.'
                                    },
                                    {
                                        name: `\`${cPrefix}dep | deposit <amount>\``,
                                        value: 'Deposits a specified amount of cash to your bank.'
                                    },
                                    {
                                        name: `\`${cPrefix}with | withdraw <amount>\``,
                                        value: 'Withdraws a specified amount of cash to your wallet.'
                                    },
                                    {
                                        name: `\`${cPrefix}addcoins <user> <amount>\``,
                                        value: 'Adds a specified amount of cash to a user. (Administrator)'
                                    }
                                ]
                            },
                        ],
                        components: [row.components[0].setDisabled(true), row.components[1].setDisabled(false)]
                    });
                }
                if (b.customId === 'info') {
                    helpMsg.edit({
                        embeds: [
                            {
                                title: "Info",
                                fields: [
                                    {
                                        name: `${cPrefix}info <user|server> <user: user>`,
                                        value: 'Displays an info of the server or a user'
                                    },
                                    {
                                        name: `${cPrefix}ping`,
                                        value: 'Displays the current client ping and the database connection'
                                    },
                                    {
                                        name: `${cPrefix}help`,
                                        value: 'Umm... You used this command'
                                    },
                                ]
                            }
                        ],
                        components: [row.components[0].setDisabled(false), row.components[1].setDisabled(true)]
                    })
                }
            } else {
                b.reply({ content: 'These buttons are not for you.', ephemeral: true })
            }
        });

        collector.on('end', async () => {
            helpMsg.edit({ components: [row.components[0].setDisabled(true), row.components[1].setDisabled(true)] })
        });
    }

Is there anything wrong in this code?

Answer 1

You can create a new MessageActionRow and set everything to disabled. This code is from my bot's help command (discord.js v13.6.0):

  let btnraw = new Discord.MessageActionRow().addComponents(
    [
      new Discord.MessageButton().setCustomId("home").setStyle("SUCCESS").setLabel("Home"),
      new Discord.MessageButton().setCustomId("general").setStyle("PRIMARY").setLabel("General"),
      new Discord.MessageButton().setCustomId("info").setStyle("PRIMARY").setLabel("Information"),
      new Discord.MessageButton().setCustomId("mod").setStyle("PRIMARY").setLabel("Moderation"),
      new Discord.MessageButton().setCustomId("fun").setStyle("PRIMARY").setLabel("Fun"),
    ]
  );
  let dbtnraw = new Discord.MessageActionRow().addComponents(
    [
      new Discord.MessageButton().setCustomId("d_home").setStyle("SUCCESS").setLabel("Home").setDisabled(true),
      new Discord.MessageButton().setCustomId("d_general").setStyle("PRIMARY").setLabel("General").setDisabled(true),
      new Discord.MessageButton().setCustomId("d_info").setStyle("PRIMARY").setLabel("Information").setDisabled(true),
      new Discord.MessageButton().setCustomId("d_mod").setStyle("PRIMARY").setLabel("Moderation").setDisabled(true),
      new Discord.MessageButton().setCustomId("d_fun").setStyle("PRIMARY").setLabel("Fun").setDisabled(true),
    ]
  );

Then you can edit the message to replace the original row like this:

helpMsg.edit({components: [d_btnraw]});