🐛 BUG: Multiple jsx elements with different props end up getting the same props on hydration

[Kilian]

What version of astro are you using?

0.22.2

What package manager are you using?

npm, yarn

What operating system are you using?

Linux

Describe the Bug

When a JSX component is instantiated in different places with different props, they end up getting the same Astro uid and the same props.

This seems to be the same bug as #844 and #846.

The example below is structured as follows:

• index page
  • GridBlock.astro
    • Tickercard.astro 1
      • Ticker.jsx
    • Tickercard.astro 2
      • Ticker.jsx

The props are set in GridBlock.astro and then sent down to Ticker.jsx

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fkwapp?file=src%2Fcomponents%2FGridBlock.astro

[WebDevSimplified]

I am also running into this exact same issue. It appears that the components are rendering exponentially. If I try to render 3 of the same component it will hydrate the component 9 times on the client when it should only be 3. I am guessing this is what is leading to the bug.

[jonathantneal]

Verified! Great example, @Kilian. You are correct about the IDs matching, as well. We’ll get this fixed.

[diegoleme]

This also happens to me. I'm using vue.js.

[Kilian]

@jonathantneal do you have any leads yet, or a workaround?

[yusufhilmi]

Any updates to this bug? It happens with Vue components as well.

[FredKSchott]

Update: I can still reproduce in v0.24.0