一个 ActionRow 中的多个按钮

Question

I'm using the discord.js library and node.js to create a Discord bot that can send a DM to a user containing buttons.

I want to send a Discord message with multiple buttons, each with a unique customId and label. My current method is using an list of buttons. I use a for loop adding button objects to the list, and pass it in to the components of the .send method as a list.

x = 5
buttons = []

for (let i = 0; i < x; i++) {
    buttons.push(new MessageActionRow().addComponents(
        new MessageButton()
            .setCustomId(i.toString())
            .setLabel(messageSplit[i])
            .setStyle('PRIMARY')
        )
    )
}

msg.reply({ embeds: [embedRecipient], components: buttons })

This works, but each button is an new ActionRow of its own and thus resulting in the buttons being on different lines. What I mean: image of buttons each on a different line

How can I make it so the same features (like customId and Label) of the buttons retain but they are all on the same line? Making them all in the same one ActionRow should solve this I don't know the code to achieve that.

Answer 1

To put all the buttons in one single MessageActionRow , you could just declare the row outside the for loop and then inside it, you can just use .addComponents() to add a button to the MessageActionRow . An example is this:

x = 5
const buttons = new MessageActionRow()

for (let i = 0; i < x; i++) {
    buttons.addComponents(
        new MessageButton()
            .setCustomId(i.toString())
            .setLabel(messageSplit[i])
            .setStyle('PRIMARY')
        )
    )
}

msg.reply({ embeds: [embedRecipient], components: [buttons] })