Search code examples
javascriptdiscorddiscord.js

How to make the bot reply with multiple action rows in DiscordJS?


I'm trying to make a Discord bot using DiscordJS, that can do a TicTacToe game, but I don't know how to add 3 rows of button below the bot's reply.

I already made 3 buttons row:

const row1 = new ActionRowBuilder()
            .addComponents(new ButtonBuilder().setCustomId("00").setLabel(" ").setStyle(ButtonStyle.Primary))
            .addComponents(new ButtonBuilder().setCustomId("01").setLabel(" ").setStyle(ButtonStyle.Primary))
            .addComponents(new ButtonBuilder().setCustomId("02").setLabel(" ").setStyle(ButtonStyle.Primary))
const row2 = new ActionRowBuilder()
            .addComponents(new ButtonBuilder().setCustomId("10").setLabel(" ").setStyle(ButtonStyle.Primary))
            .addComponents(new ButtonBuilder().setCustomId("11").setLabel(" ").setStyle(ButtonStyle.Primary))
            .addComponents(new ButtonBuilder().setCustomId("12").setLabel(" ").setStyle(ButtonStyle.Primary))
const row3 = new ActionRowBuilder()
            .addComponents(new ButtonBuilder().setCustomId("20").setLabel(" ").setStyle(ButtonStyle.Primary))
            .addComponents(new ButtonBuilder().setCustomId("21").setLabel(" ").setStyle(ButtonStyle.Primary))
            .addComponents(new ButtonBuilder().setCustomId("22").setLabel(" ").setStyle(ButtonStyle.Primary))

Here's the bot's reply (that only has 1 row).

await interaction.reply({
            content:`**TicTacToe**.`,
            components:[row1],
          });

The reply should have 3 rows below the message.


Solution

  • You can just add row 1, 2 and 3 as an array like so:

    await interaction.reply({
                content:`**TicTacToe**.`,
                components:[row1, row2, row3],
              });
    

    Please see this on action rows with buttons