Ryan Comments - Answer Overflow

Ryan

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

@Qjuh Just wanted to apologize. I completely forgot the initial thing you mentioned - toJSON Adding that fixed everything. That's completely my bad. For anyone else just joining in:

 const initialContainer = message.components[0].toJSON() as APIContainerComponent;

 const initialContainer = message.components[0].toJSON() as APIContainerComponent;

was the fix

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

const sectionComponent = container.components.find((component) => component.data.id === 1);

console.log(sectionComponent); // < undefined

const sectionComponent = container.components.find((component) => component.data.id === 1);

console.log(sectionComponent); // < undefined

const sectionComponent = container.components.find((component) => component.data.data.id === 1);

console.log(sectionComponent); // correctly logs the component

const sectionComponent = container.components.find((component) => component.data.data.id === 1);

console.log(sectionComponent); // correctly logs the component

But 2nd approach has a ts error:

Property 'data' does not exist on type 'Partial<APIActionRowComponent<APIComponentInMessageActionRow | APITextInputComponent>> | ... 4 more ... | Partial<...>'.
  Property 'data' does not exist on type 'Partial<APIActionRowComponent<APIComponentInMessageActionRow | APITextInputComponent>>'

Property 'data' does not exist on type 'Partial<APIActionRowComponent<APIComponentInMessageActionRow | APITextInputComponent>> | ... 4 more ... | Partial<...>'.
  Property 'data' does not exist on type 'Partial<APIActionRowComponent<APIComponentInMessageActionRow | APITextInputComponent>>'

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

Yea i understand that, but, I would need to do component.data.data.id for it to find something, since component.data.id always returns undefined - and the 2nd .data is not recognized by ts - i guess my question has shifted a bit now. Does that make sense?

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

Even if i want to replace both the TextDisplay and the Accessory? I initially wanted to just do the accessory, but now want to change the entire section itself

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

Only got to trying this out today, and what i've done so far:

const initialContainer = message.components[0] as APIContainerComponent;

const container = new ContainerBuilder(initialContainer);

container.components.map((component) => console.log(component));

const initialContainer = message.components[0] as APIContainerComponent;

const container = new ContainerBuilder(initialContainer);

container.components.map((component) => console.log(component));

I notice that it logs this:

SectionBuilder {
  data: {
    type: 9,
    data: {
      type: 9,
      id: 1,
    },
  },
  components: [...]

SectionBuilder {
  data: {
    type: 9,
    data: {
      type: 9,
      id: 1,
    },
  },
  components: [...]

-# can share the full log if needed I've explicitly used setId(1) on the initial builder itself like so:

container
  .addSectionComponents(
      new SectionBuilder()
          .addTextDisplayComponents(new TextDisplayBuilder().setContent(...))
          .setButtonAccessory(
              new ButtonBuilder()
                  .setLabel(...)
                  .setCustomId(...)
                  .setStyle(ButtonStyle.Primary)
          )
  )
  .setId(1); // <= as I want to essentially replace with a new SectionBuilder on button click

container
  .addSectionComponents(
      new SectionBuilder()
          .addTextDisplayComponents(new TextDisplayBuilder().setContent(...))
          .setButtonAccessory(
              new ButtonBuilder()
                  .setLabel(...)
                  .setCustomId(...)
                  .setStyle(ButtonStyle.Primary)
          )
  )
  .setId(1); // <= as I want to essentially replace with a new SectionBuilder on button click

And noticed that when I do:

container.components.find((component) => component.data.id === 1);

container.components.find((component) => component.data.id === 1);

It will always be undefined since as per the logs, i need to do component.data.data.id but the 2nd .data is not recognized by TS. Did i miss a step/perhaps didn't do the correct typing somewhere? Am i maybe just doing it wrong again lol? Thanks!

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

alr thanks. So even if the component is not necessarily the 1st component, giving it an id of 1 is ok

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

also i'm not sure if this is correct, but when logging the container i noticed incremental ID's. Would I need to setId to something like 50 to avoid issues or does it not matter

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

yep thanks, Qjuh did mention. Thanks again

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

Alr fine with that.

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

i did that initially but typescript complains:

Argument of type 'TopLevelComponent' is not assignable to parameter of type 'Partial<APIContainerComponent> | undefined'.
  Type 'ActionRow<MessageActionRowComponent>' is not assignable to type 'Partial<APIContainerComponent>'.
    Types of property 'components' are incompatible.
      Type 'MessageActionRowComponent[]' is not assignable to type 'APIComponentInContainer[]'.
        Type 'MessageActionRowComponent' is not assignable to type 'APIComponentInContainer'.
          Type 'ButtonComponent' is not assignable to type 'APIComponentInContainer'.
            Property 'components' is missing in type 'ButtonComponent' but required in type 'APIActionRowComponent<APIComponentInMessageActionRow>'

Argument of type 'TopLevelComponent' is not assignable to parameter of type 'Partial<APIContainerComponent> | undefined'.
  Type 'ActionRow<MessageActionRowComponent>' is not assignable to type 'Partial<APIContainerComponent>'.
    Types of property 'components' are incompatible.
      Type 'MessageActionRowComponent[]' is not assignable to type 'APIComponentInContainer[]'.
        Type 'MessageActionRowComponent' is not assignable to type 'APIComponentInContainer'.
          Type 'ButtonComponent' is not assignable to type 'APIComponentInContainer'.
            Property 'components' is missing in type 'ButtonComponent' but required in type 'APIActionRowComponent<APIComponentInMessageActionRow>'

caused by:

const container = new ContainerBuilder(message.components[0]);

const container = new ContainerBuilder(message.components[0]);

15 replies

DIAdiscord.js - Imagine an app

•Created by Ryan on 4/27/2025 in #djs-questions

Edit components within a container (CV2)

i know spoon feeding is discouraged and i do not want you to, but could you perhaps send a small snippet of what you mean?

15 replies

Gaming

Programming