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.
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