bug: about stencil HOT 6 CLOSED

Hey @alicewriteswrongs Thanks for the quick response! I cannot reproduce it outside Carbon lib..I guess it's some bug weird that stencil plays with Carbon.

from stencil.

Hey @will-hu-0, thanks for reporting!

I was just able to confirm that this is a bug using the reproduction you supplied, thanks for taking the time to put that together.

I did find a quick workaround which you might be able to use to get this code working. I changed the <p> tag to include a key attribute based on the card description, like so:

          {this.dataForUI.map(card => {
            console.log(card);
            return <dds-card-group-item cta-type="local" href="https://example.com">
              <dds-card-heading>{card.heading}</dds-card-heading>
              <p key={card.description}>{card.description}</p> {/* This does NOT work */}
              {/* <div>{card.description}</div> This works */}
              <dds-card-cta-footer slot="footer"></dds-card-cta-footer>
            </dds-card-group-item>
          })}

here's a diff of it you could apply to the project:

diff --git a/src/components/my-component/my-component.tsx b/src/components/my-component/my-component.tsx
index d75f4d3..ffe894b 100644
--- a/src/components/my-component/my-component.tsx
+++ b/src/components/my-component/my-component.tsx
@@ -55,14 +55,15 @@ export class MyComponent {
           </dds-button-group-item>
         </dds-button-group>
         <dds-card-group grid-mode="narrow" cards-per-row="3">
-          {this.dataForUI.map(card => (
-            <dds-card-group-item cta-type="local" href="https://example.com">
+          {this.dataForUI.map(card => {
+            console.log(card);
+            return <dds-card-group-item cta-type="local" href="https://example.com">
               <dds-card-heading>{card.heading}</dds-card-heading>
-              <p>{card.description}</p> {/* This does NOT work */}
+              <p key={card.description}>{card.description}</p> {/* This does NOT work */}
               {/* <div>{card.description}</div> This works */}
               <dds-card-cta-footer slot="footer"></dds-card-cta-footer>
             </dds-card-group-item>
-          ))}
+          })}
         </dds-card-group>
       </div>
      </Host>

I'm going to label this so it gets ingested and the team will investigate and try to come up with a fix.

Thanks again for reporting!

from stencil.

Hey @will-hu-0 I've actually tried to reproduce this without the carbon components and I don't think I'm able to - if I make the following changes to the component in your reproduction case I don't see the issue anymore:

  render() {
    return (
    <Host>
      <button onClick={() => this.handleNext()}>
        Next
      </button>
      <div>
        {this.dataForUI.map(card => (
          <p>{card.description}</p>
        ))}
      </div>
     </Host>
    )
  }

Have you been able to reproduce the issue using only Stencil? We're not able to offer support for issues that crop up in third-party libraries unfortunately

from stencil.

Alright, thanks for getting back! In that case I'm going to close this for now, feel free to open another issue if you do narrow the problem down to a Stencil-only reproduction case.

Thanks!

from stencil.

@will-hu-0 I can see that the issue is already closed, but I think it's important to clarify something.

The problem is that the key attribute is missing from the dds-card-group-item element.

The key is an important element in JSX, and must be unique to each element in the list (it's not advisable to use the index of an array).

from stencil.

@Sukaato fwiw Stencil has an automatic key insertion capability but there might be situations where this doesn't work as expected. If you experience a situation like this and can create a reproducible example, we are happy to look into this.

from stencil.