diff --git a/.changeset/yellow-coins-sip.md b/.changeset/yellow-coins-sip.md
new file mode 100644
index 0000000000..664429fd06
--- /dev/null
+++ b/.changeset/yellow-coins-sip.md
@@ -0,0 +1,9 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[React, Angular] fix: issue with ``state`` inside `key` attribute in `Fragment`.
+
+Example:
+
+`<Fragment key={state.xxx + "abc"}...` was generated in React with `state.xxx` and in Angular without `this.`.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 29bc10fdd5..3c6efb9149 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -100,7 +100,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: snapshots-updates
-          path: ./packages/core/src/__tests__/__snapshots__
+          path: ./packages/core/src/**/__snapshots__
           retention-days: 30
 
   site:
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 108b6731e1..435fd037c3 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1555,10 +1555,24 @@ exports[`Alpine.js > jsx > Javascript Test > basicForFragment 1`] = `
       <div><span x-html=\\"option\\"></span></div>
     </div>
   </template>
+  <template x-for=\\"option in ['a', 'b', 'c']\\">
+    <div x-bind:key=\\"\`\${id}-\${option}\`\\">
+      <div><span x-html=\\"option\\"></span></div>
+    </div>
+  </template>
+  <select>
+    <template x-for=\\"option in ['d', 'e', 'f']\\">
+      <option x-bind:key=\\"\`\${id}-\${option}\`\\" x-bind:value=\\"option\\">
+        <span x-html=\\"option\\"></span>
+      </option>
+    </template>
+  </select>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
-    Alpine.data(\\"basicForFragment\\", () => ({}));
+    Alpine.data(\\"basicForFragment\\", () => ({
+      id: \\"xyz\\",
+    }));
   });
 </script>
 "
@@ -4608,10 +4622,24 @@ exports[`Alpine.js > jsx > Typescript Test > basicForFragment 1`] = `
       <div><span x-html=\\"option\\"></span></div>
     </div>
   </template>
+  <template x-for=\\"option in ['a', 'b', 'c']\\">
+    <div x-bind:key=\\"\`\${id}-\${option}\`\\">
+      <div><span x-html=\\"option\\"></span></div>
+    </div>
+  </template>
+  <select>
+    <template x-for=\\"option in ['d', 'e', 'f']\\">
+      <option x-bind:key=\\"\`\${id}-\${option}\`\\" x-bind:value=\\"option\\">
+        <span x-html=\\"option\\"></span>
+      </option>
+    </template>
+  </select>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
-    Alpine.data(\\"basicForFragment\\", () => ({}));
+    Alpine.data(\\"basicForFragment\\", () => ({
+      id: \\"xyz\\",
+    }));
   });
 </script>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 030255a311..6eeb8de867 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -3414,6 +3414,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -3425,9 +3439,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -11081,6 +11102,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -11092,9 +11127,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index 0811f115af..fa0867c783 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -3461,6 +3461,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -3472,9 +3486,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -11254,6 +11275,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -11265,9 +11300,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 70854852df..70b083603c 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -3543,6 +3543,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -3554,9 +3568,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -11485,6 +11506,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -11496,9 +11531,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index e074ed773a..b00b71c8cf 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -3113,13 +3113,34 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -9974,13 +9995,34 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index e40044e65c..daccb367f9 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -6478,6 +6478,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -6489,9 +6503,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -6518,6 +6539,20 @@ import { CommonModule } from \\"@angular/common\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -6531,9 +6566,16 @@ import { CommonModule } from \\"@angular/common\\";
   imports: [CommonModule],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 "
 `;
@@ -20898,6 +20940,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -20909,9 +20965,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -20938,6 +21001,20 @@ import { CommonModule } from \\"@angular/common\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -20951,9 +21028,16 @@ import { CommonModule } from \\"@angular/common\\";
   imports: [CommonModule],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 0f0e3aee95..754830f4af 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3781,10 +3781,23 @@ exports[`Html > jsx > Javascript Test > basicForFragment 1`] = `
       <template data-el=\\"div-1\\"><!-- option --></template>
     </div>
   </template>
+
+  <template data-el=\\"for-2\\">
+    <div>
+      <template data-el=\\"div-2\\"><!-- option --></template>
+    </div>
+  </template>
+  <select data-dom-state=\\"select-1\\">
+    <template data-el=\\"for-3\\">
+      <option data-el=\\"option-1\\">
+        <template data-el=\\"div-3\\"><!-- option --></template>
+      </option>
+    </template>
+  </select>
 </div>
 <script>
   (() => {
-    const state = {};
+    const state = { id: \\"xyz\\" };
 
     let context = null;
     let nodesToDestroy = [];
@@ -3815,6 +3828,34 @@ exports[`Html > jsx > Javascript Test > basicForFragment 1`] = `
         renderTextNode(el, option);
       });
 
+      document.querySelectorAll(\\"[data-el='for-2']\\").forEach((el) => {
+        let array = [\\"a\\", \\"b\\", \\"c\\"];
+        renderLoop(el, array, \\"option\\");
+      });
+
+      document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
+        const option = getScope(el, \\"option\\");
+        renderTextNode(el, option);
+      });
+
+      document.querySelectorAll(\\"[data-el='for-3']\\").forEach((el) => {
+        let array = [\\"d\\", \\"e\\", \\"f\\"];
+        renderLoop(el, array, \\"option\\");
+      });
+
+      document.querySelectorAll(\\"[data-el='option-1']\\").forEach((el) => {
+        const option = getScope(el, \\"option\\");
+
+        el.key = \`\${state.id}-\${option}\`;
+
+        el.value = option;
+      });
+
+      document.querySelectorAll(\\"[data-el='div-3']\\").forEach((el) => {
+        const option = getScope(el, \\"option\\");
+        renderTextNode(el, option);
+      });
+
       destroyAnyNodes();
 
       pendingUpdate = false;
@@ -11494,10 +11535,23 @@ exports[`Html > jsx > Typescript Test > basicForFragment 1`] = `
       <template data-el=\\"div-1\\"><!-- option --></template>
     </div>
   </template>
+
+  <template data-el=\\"for-2\\">
+    <div>
+      <template data-el=\\"div-2\\"><!-- option --></template>
+    </div>
+  </template>
+  <select data-dom-state=\\"select-1\\">
+    <template data-el=\\"for-3\\">
+      <option data-el=\\"option-1\\">
+        <template data-el=\\"div-3\\"><!-- option --></template>
+      </option>
+    </template>
+  </select>
 </div>
 <script>
   (() => {
-    const state = {};
+    const state = { id: \\"xyz\\" };
 
     let context = null;
     let nodesToDestroy = [];
@@ -11528,6 +11582,34 @@ exports[`Html > jsx > Typescript Test > basicForFragment 1`] = `
         renderTextNode(el, option);
       });
 
+      document.querySelectorAll(\\"[data-el='for-2']\\").forEach((el) => {
+        let array = [\\"a\\", \\"b\\", \\"c\\"];
+        renderLoop(el, array, \\"option\\");
+      });
+
+      document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
+        const option = getScope(el, \\"option\\");
+        renderTextNode(el, option);
+      });
+
+      document.querySelectorAll(\\"[data-el='for-3']\\").forEach((el) => {
+        let array = [\\"d\\", \\"e\\", \\"f\\"];
+        renderLoop(el, array, \\"option\\");
+      });
+
+      document.querySelectorAll(\\"[data-el='option-1']\\").forEach((el) => {
+        const option = getScope(el, \\"option\\");
+
+        el.key = \`\${state.id}-\${option}\`;
+
+        el.value = option;
+      });
+
+      document.querySelectorAll(\\"[data-el='div-3']\\").forEach((el) => {
+        const option = getScope(el, \\"option\\");
+        renderTextNode(el, option);
+      });
+
       destroyAnyNodes();
 
       pendingUpdate = false;
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index b8259e55be..4907f9241c 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -435,7 +435,9 @@ exports[`Liquid > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
 `;
 
 exports[`Liquid > jsx > Javascript Test > basicForFragment 1`] = `
-"<div></div>
+"<div>
+  <select></select>
+</div>
 "
 `;
 
@@ -1410,7 +1412,9 @@ exports[`Liquid > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
 `;
 
 exports[`Liquid > jsx > Typescript Test > basicForFragment 1`] = `
-"<div></div>
+"<div>
+  <select></select>
+</div>
 "
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index cee39adce9..f64458f4a0 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2190,6 +2190,8 @@ export default class BasicForFragment extends LitElement {
     return this;
   }
 
+  @state() id = \\"xyz\\";
+
   render() {
     return html\`
 
@@ -2199,7 +2201,21 @@ export default class BasicForFragment extends LitElement {
         .key=\\"\${\`key-\${option}\`}\\"
         ><div>\${option}</div></my-fragment
       >\`
-          )}
+          )} \${[\\"a\\", \\"b\\", \\"c\\"]?.map(
+      (option, index) => html\`<my-fragment
+        .key=\\"\${\`\${this.id}-\${option}\`}\\"
+        ><div>\${option}</div></my-fragment
+      >\`
+    )}
+          <select>
+            \${[\\"d\\", \\"e\\", \\"f\\"]?.map(
+              (option, index) => html\`
+        <option .key=\\"\${\`\${this.id}-\${option}\`}\\" .value=\\"\${option}\\">
+          \${option}
+        </option>
+        \`
+            )}
+          </select>
         </div>
 
         \`;
@@ -7038,6 +7054,8 @@ export default class BasicForFragment extends LitElement {
     return this;
   }
 
+  @state() id = \\"xyz\\";
+
   render() {
     return html\`
 
@@ -7047,7 +7065,21 @@ export default class BasicForFragment extends LitElement {
         .key=\\"\${\`key-\${option}\`}\\"
         ><div>\${option}</div></my-fragment
       >\`
-          )}
+          )} \${[\\"a\\", \\"b\\", \\"c\\"]?.map(
+      (option, index) => html\`<my-fragment
+        .key=\\"\${\`\${this.id}-\${option}\`}\\"
+        ><div>\${option}</div></my-fragment
+      >\`
+    )}
+          <select>
+            \${[\\"d\\", \\"e\\", \\"f\\"]?.map(
+              (option, index) => html\`
+        <option .key=\\"\${\`\${this.id}-\${option}\`}\\" .value=\\"\${option}\\">
+          \${option}
+        </option>
+        \`
+            )}
+          </select>
         </div>
 
         \`;
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index d2c2429920..41633ba0e5 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1455,12 +1455,26 @@ exports[`Marko > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
 `;
 
 exports[`Marko > jsx > Javascript Test > basicForFragment 1`] = `
-"class {}
+"class {
+  onCreate() {
+    this.state = { id: \\"xyz\\" };
+  }
+}
 
 <div>
   <for|option| of=(['a', 'b', 'c'])>
     <div>\${option}</div>
   </for>
+  <for|option| of=(['a', 'b', 'c'])>
+    <div>\${option}</div>
+  </for>
+  <select>
+    <for|option| of=(['d', 'e', 'f'])>
+      <option key=(\`\${state.id}-\${option}\`) value=(option)>
+        \${option}
+      </option>
+    </for>
+  </select>
 </div>"
 `;
 
@@ -4149,12 +4163,26 @@ exports[`Marko > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
 `;
 
 exports[`Marko > jsx > Typescript Test > basicForFragment 1`] = `
-"class {}
+"class {
+  onCreate() {
+    this.state = { id: \\"xyz\\" };
+  }
+}
 
 <div>
   <for|option| of=(['a', 'b', 'c'])>
     <div>\${option}</div>
   </for>
+  <for|option| of=(['a', 'b', 'c'])>
+    <div>\${option}</div>
+  </for>
+  <select>
+    <for|option| of=(['d', 'e', 'f'])>
+      <option key=(\`\${state.id}-\${option}\`) value=(option)>
+        \${option}
+      </option>
+    </for>
+  </select>
 </div>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index d7d714b82b..5cbc1dd33e 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -1595,9 +1595,12 @@ export default function MyComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicForFragment 1`] = `
-"import { For, Fragment } from \\"@components\\";
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For, Fragment } from \\"@components\\";
 
 export default function BasicForFragment(props) {
+  const state = useStore({ id: \\"xyz\\" });
+
   return [
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"].map((option, index) => (
@@ -1605,6 +1608,18 @@ export default function BasicForFragment(props) {
           <div>{option}</div>
         </Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"].map((option, index) => (
+        <Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"].map((option, index) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>,
   ];
 }
@@ -4866,9 +4881,12 @@ export default function MyComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicForFragment 1`] = `
-"import { For, Fragment } from \\"@components\\";
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For, Fragment } from \\"@components\\";
 
 export default function BasicForFragment(props) {
+  const state = useStore({ id: \\"xyz\\" });
+
   return [
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"].map((option, index) => (
@@ -4876,6 +4894,18 @@ export default function BasicForFragment(props) {
           <div>{option}</div>
         </Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"].map((option, index) => (
+        <Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"].map((option, index) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>,
   ];
 }
@@ -8741,10 +8771,12 @@ export default function MyComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForFragment 1`] = `
-"import { For } from \\"@builder.io/mitosis\\";
+"import { useStore, For } from \\"@builder.io/mitosis\\";
 import { Fragment } from \\"@components\\";
 
 export default function BasicForFragment(props) {
+  const state = useStore({ id: \\"xyz\\" });
+
   return (
     <div>
       <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
@@ -8754,6 +8786,22 @@ export default function BasicForFragment(props) {
           </Fragment>
         )}
       </For>
+      <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+        {(option, index) => (
+          <Fragment key={\`\${state.id}-\${option}\`}>
+            <div>{option}</div>
+          </Fragment>
+        )}
+      </For>
+      <select>
+        <For each={[\\"d\\", \\"e\\", \\"f\\"]}>
+          {(option, index) => (
+            <option key={\`\${state.id}-\${option}\`} value={option}>
+              {option}
+            </option>
+          )}
+        </For>
+      </select>
     </div>
   );
 }
@@ -12070,10 +12118,12 @@ export default function MyComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForFragment 1`] = `
-"import { For } from \\"@builder.io/mitosis\\";
+"import { useStore, For } from \\"@builder.io/mitosis\\";
 import { Fragment } from \\"@components\\";
 
 export default function BasicForFragment(props) {
+  const state = useStore({ id: \\"xyz\\" });
+
   return (
     <div>
       <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
@@ -12083,6 +12133,22 @@ export default function BasicForFragment(props) {
           </Fragment>
         )}
       </For>
+      <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+        {(option, index) => (
+          <Fragment key={\`\${state.id}-\${option}\`}>
+            <div>{option}</div>
+          </Fragment>
+        )}
+      </For>
+      <select>
+        <For each={[\\"d\\", \\"e\\", \\"f\\"]}>
+          {(option, index) => (
+            <option key={\`\${state.id}-\${option}\`} value={option}>
+              {option}
+            </option>
+          )}
+        </For>
+      </select>
     </div>
   );
 }
@@ -16140,9 +16206,13 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -16150,6 +16220,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -19808,9 +19890,13 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -19818,6 +19904,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index fb7f8737b4..76f99fba8e 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -5936,6 +5936,129 @@ exports[`Parse JSX > Javascript > basicForFragment 1`] = `
             "forName": "option",
           },
         },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "each": {
+              "bindingType": "expression",
+              "code": "['a', 'b', 'c']",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "key": {
+                  "bindingType": "expression",
+                  "code": "\`\${state.id}-\${option}\`",
+                  "type": "single",
+                },
+              },
+              "children": [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  "bindings": {},
+                  "children": [
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      "bindings": {
+                        "_text": {
+                          "bindingType": "expression",
+                          "code": "option",
+                          "type": "single",
+                        },
+                      },
+                      "children": [],
+                      "meta": {},
+                      "name": "div",
+                      "properties": {},
+                      "scope": {},
+                    },
+                  ],
+                  "meta": {},
+                  "name": "div",
+                  "properties": {},
+                  "scope": {},
+                },
+              ],
+              "meta": {},
+              "name": "Fragment",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "For",
+          "properties": {},
+          "scope": {
+            "forName": "option",
+          },
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "each": {
+                  "bindingType": "expression",
+                  "code": "['d', 'e', 'f']",
+                  "type": "single",
+                },
+              },
+              "children": [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  "bindings": {
+                    "key": {
+                      "bindingType": "expression",
+                      "code": "\`\${state.id}-\${option}\`",
+                      "type": "single",
+                    },
+                    "value": {
+                      "bindingType": "expression",
+                      "code": "option",
+                      "type": "single",
+                    },
+                  },
+                  "children": [
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      "bindings": {
+                        "_text": {
+                          "bindingType": "expression",
+                          "code": "option",
+                          "type": "single",
+                        },
+                      },
+                      "children": [],
+                      "meta": {},
+                      "name": "div",
+                      "properties": {},
+                      "scope": {},
+                    },
+                  ],
+                  "meta": {},
+                  "name": "option",
+                  "properties": {},
+                  "scope": {},
+                },
+              ],
+              "meta": {},
+              "name": "For",
+              "properties": {},
+              "scope": {
+                "forName": "option",
+              },
+            },
+          ],
+          "meta": {},
+          "name": "select",
+          "properties": {},
+          "scope": {},
+        },
       ],
       "meta": {},
       "name": "div",
@@ -5957,7 +6080,13 @@ exports[`Parse JSX > Javascript > basicForFragment 1`] = `
   "meta": {},
   "name": "BasicForFragment",
   "refs": {},
-  "state": {},
+  "state": {
+    "id": {
+      "code": "'xyz'",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
   "subComponents": [],
 }
 `;
@@ -18955,6 +19084,129 @@ exports[`Parse JSX > Typescript > basicForFragment 1`] = `
             "forName": "option",
           },
         },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "each": {
+              "bindingType": "expression",
+              "code": "['a', 'b', 'c']",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "key": {
+                  "bindingType": "expression",
+                  "code": "\`\${state.id}-\${option}\`",
+                  "type": "single",
+                },
+              },
+              "children": [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  "bindings": {},
+                  "children": [
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      "bindings": {
+                        "_text": {
+                          "bindingType": "expression",
+                          "code": "option",
+                          "type": "single",
+                        },
+                      },
+                      "children": [],
+                      "meta": {},
+                      "name": "div",
+                      "properties": {},
+                      "scope": {},
+                    },
+                  ],
+                  "meta": {},
+                  "name": "div",
+                  "properties": {},
+                  "scope": {},
+                },
+              ],
+              "meta": {},
+              "name": "Fragment",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "For",
+          "properties": {},
+          "scope": {
+            "forName": "option",
+          },
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "each": {
+                  "bindingType": "expression",
+                  "code": "['d', 'e', 'f']",
+                  "type": "single",
+                },
+              },
+              "children": [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  "bindings": {
+                    "key": {
+                      "bindingType": "expression",
+                      "code": "\`\${state.id}-\${option}\`",
+                      "type": "single",
+                    },
+                    "value": {
+                      "bindingType": "expression",
+                      "code": "option",
+                      "type": "single",
+                    },
+                  },
+                  "children": [
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      "bindings": {
+                        "_text": {
+                          "bindingType": "expression",
+                          "code": "option",
+                          "type": "single",
+                        },
+                      },
+                      "children": [],
+                      "meta": {},
+                      "name": "div",
+                      "properties": {},
+                      "scope": {},
+                    },
+                  ],
+                  "meta": {},
+                  "name": "option",
+                  "properties": {},
+                  "scope": {},
+                },
+              ],
+              "meta": {},
+              "name": "For",
+              "properties": {},
+              "scope": {
+                "forName": "option",
+              },
+            },
+          ],
+          "meta": {},
+          "name": "select",
+          "properties": {},
+          "scope": {},
+        },
       ],
       "meta": {},
       "name": "div",
@@ -18976,7 +19228,13 @@ exports[`Parse JSX > Typescript > basicForFragment 1`] = `
   "meta": {},
   "name": "BasicForFragment",
   "refs": {},
-  "state": {},
+  "state": {
+    "id": {
+      "code": "'xyz'",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
   "subComponents": [],
 }
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 9832dcf199..09eab87c3f 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1690,8 +1690,11 @@ export default MyComponent;
 exports[`Preact > jsx > Javascript Test > basicForFragment 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1699,6 +1702,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5644,8 +5659,11 @@ export default MyComponent;
 exports[`Preact > jsx > Typescript Test > basicForFragment 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5653,6 +5671,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 36c49fc99f..b4e285c5ca 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3590,9 +3590,11 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > basicForFragment 1`] = `
-"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const BasicForFragment = component$((props) => {
+  const state = useStore({ id: \\"xyz\\" });
+
   return (
     <div>
       {([\\"a\\", \\"b\\", \\"c\\"] || []).map((option) => {
@@ -3602,6 +3604,22 @@ export const BasicForFragment = component$((props) => {
           </Fragment>
         );
       })}
+      {([\\"a\\", \\"b\\", \\"c\\"] || []).map((option) => {
+        return (
+          <Fragment key={\`\${state.id}-\${option}\`}>
+            <div>{option}</div>
+          </Fragment>
+        );
+      })}
+      <select>
+        {([\\"d\\", \\"e\\", \\"f\\"] || []).map((option) => {
+          return (
+            <option key={\`\${state.id}-\${option}\`} value={option}>
+              {option}
+            </option>
+          );
+        })}
+      </select>
     </div>
   );
 });
@@ -7477,9 +7495,11 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > basicForFragment 1`] = `
-"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const BasicForFragment = component$((props: any) => {
+  const state = useStore<any>({ id: \\"xyz\\" });
+
   return (
     <div>
       {([\\"a\\", \\"b\\", \\"c\\"] || []).map((option) => {
@@ -7489,6 +7509,22 @@ export const BasicForFragment = component$((props: any) => {
           </Fragment>
         );
       })}
+      {([\\"a\\", \\"b\\", \\"c\\"] || []).map((option) => {
+        return (
+          <Fragment key={\`\${state.id}-\${option}\`}>
+            <div>{option}</div>
+          </Fragment>
+        );
+      })}
+      <select>
+        {([\\"d\\", \\"e\\", \\"f\\"] || []).map((option) => {
+          return (
+            <option key={\`\${state.id}-\${option}\`} value={option}>
+              {option}
+            </option>
+          );
+        })}
+      </select>
     </div>
   );
 });
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index e0fe28c783..6a11d32212 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -2261,8 +2261,11 @@ import {
   Button,
   Linking,
 } from \\"react-native\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <View>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -2272,6 +2275,20 @@ function BasicForFragment(props) {
           </View>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <View>
+            <Text>{option}</Text>
+          </View>
+        </React.Fragment>
+      ))}
+      <View>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <View key={\`\${id}-\${option}\`} value={option}>
+            <Text>{option}</Text>
+          </View>
+        ))}
+      </View>
     </View>
   );
 }
@@ -7722,8 +7739,11 @@ import {
   Button,
   Linking,
 } from \\"react-native\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <View>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -7733,6 +7753,20 @@ function BasicForFragment(props: any) {
           </View>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <View>
+            <Text>{option}</Text>
+          </View>
+        </React.Fragment>
+      ))}
+      <View>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <View key={\`\${id}-\${option}\`} value={option}>
+            <Text>{option}</Text>
+          </View>
+        ))}
+      </View>
     </View>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index ed4693e877..e10e5b46f2 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -1699,10 +1699,11 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
 
 function BasicForFragment(props) {
-  const state = useBuilderState({});
+  const state = useBuilderState({ id: \\"xyz\\" });
 
   return (
     <div>
@@ -1711,6 +1712,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5636,10 +5649,11 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
 
 function BasicForFragment(props: any) {
-  const state = useBuilderState({});
+  const state = useBuilderState({ id: \\"xyz\\" });
 
   return (
     <div>
@@ -5648,6 +5662,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index 214348e508..5c9aaa1ce4 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -1741,9 +1741,13 @@ export default observedMyComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
 function BasicForFragment(props) {
+  const state = useLocalObservable(() => ({ id: \\"xyz\\" }));
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1751,6 +1755,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5714,9 +5730,13 @@ export default observedMyComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
 function BasicForFragment(props: any) {
+  const state = useLocalObservable(() => ({ id: \\"xyz\\" }));
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5724,6 +5744,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index 08033a9eac..61e149d3fd 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -1691,9 +1691,13 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
 
 function BasicForFragment(props) {
+  const state = useMutable({ id: \\"xyz\\" });
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1701,6 +1705,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5541,9 +5557,13 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
 
 function BasicForFragment(props: any) {
+  const state = useMutable({ id: \\"xyz\\" });
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5551,6 +5571,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 8dd5d5d2f6..d550f3a398 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -1694,9 +1694,13 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
 
 function BasicForFragment(props) {
+  const state = useLocalProxy({ id: \\"xyz\\" });
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1704,6 +1708,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5547,9 +5563,13 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
 
 function BasicForFragment(props: any) {
+  const state = useLocalProxy({ id: \\"xyz\\" });
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5557,6 +5577,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${state.id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${state.id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 95bdf7a555..7e44207a3f 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1148,9 +1148,12 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
 
 function BasicForFragment(props) {
+  const id = \\"xyz\\";
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1158,6 +1161,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -4093,9 +4108,12 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
 
 function BasicForFragment(props: any) {
+  const id = \\"xyz\\";
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -4103,6 +4121,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 9a9113265f..ba3fffdf46 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1671,9 +1671,13 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1681,6 +1685,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5521,9 +5537,13 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5531,6 +5551,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 096da473ee..47d8be4914 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1668,9 +1668,13 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1678,6 +1682,18 @@ function BasicForFragment(props) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
@@ -5247,9 +5263,13 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <div>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5257,6 +5277,18 @@ function BasicForFragment(props: any) {
           <div>{option}</div>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <div>{option}</div>
+        </React.Fragment>
+      ))}
+      <select>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <option key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 52736d7bc1..4f1e461a87 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -3827,9 +3827,11 @@ export default MyComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForFragment 1`] = `
-"import { For } from \\"solid-js\\";
+"import { For, createSignal, createMemo } from \\"solid-js\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = createSignal(\\"xyz\\");
+
   return (
     <>
       <div>
@@ -3843,6 +3845,28 @@ function BasicForFragment(props) {
             );
           }}
         </For>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <>
+                <div>{option}</div>
+              </>
+            );
+          }}
+        </For>
+        <select>
+          <For each={[\\"d\\", \\"e\\", \\"f\\"]}>
+            {(option, _index) => {
+              const index = _index();
+              return (
+                <option key={\`\${id()}-\${option}\`} value={option}>
+                  {option}
+                </option>
+              );
+            }}
+          </For>
+        </select>
       </div>
     </>
   );
@@ -3853,9 +3877,11 @@ export default BasicForFragment;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForFragment 2`] = `
-"import { For } from \\"solid-js\\";
+"import { For, createSignal, createMemo } from \\"solid-js\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = createSignal(\\"xyz\\");
+
   return (
     <>
       <div>
@@ -3869,6 +3895,28 @@ function BasicForFragment(props) {
             );
           }}
         </For>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <>
+                <div>{option}</div>
+              </>
+            );
+          }}
+        </For>
+        <select>
+          <For each={[\\"d\\", \\"e\\", \\"f\\"]}>
+            {(option, _index) => {
+              const index = _index();
+              return (
+                <option key={\`\${id()}-\${option}\`} value={option}>
+                  {option}
+                </option>
+              );
+            }}
+          </For>
+        </select>
       </div>
     </>
   );
@@ -12155,9 +12203,11 @@ export default MyComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForFragment 1`] = `
-"import { For } from \\"solid-js\\";
+"import { For, createSignal, createMemo } from \\"solid-js\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = createSignal(\\"xyz\\");
+
   return (
     <>
       <div>
@@ -12171,6 +12221,28 @@ function BasicForFragment(props: any) {
             );
           }}
         </For>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <>
+                <div>{option}</div>
+              </>
+            );
+          }}
+        </For>
+        <select>
+          <For each={[\\"d\\", \\"e\\", \\"f\\"]}>
+            {(option, _index) => {
+              const index = _index();
+              return (
+                <option key={\`\${id()}-\${option}\`} value={option}>
+                  {option}
+                </option>
+              );
+            }}
+          </For>
+        </select>
       </div>
     </>
   );
@@ -12181,9 +12253,11 @@ export default BasicForFragment;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForFragment 2`] = `
-"import { For } from \\"solid-js\\";
+"import { For, createSignal, createMemo } from \\"solid-js\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = createSignal(\\"xyz\\");
+
   return (
     <>
       <div>
@@ -12197,6 +12271,28 @@ function BasicForFragment(props: any) {
             );
           }}
         </For>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <>
+                <div>{option}</div>
+              </>
+            );
+          }}
+        </For>
+        <select>
+          <For each={[\\"d\\", \\"e\\", \\"f\\"]}>
+            {(option, _index) => {
+              const index = _index();
+              return (
+                <option key={\`\${id()}-\${option}\`} value={option}>
+                  {option}
+                </option>
+              );
+            }}
+          </For>
+        </select>
       </div>
     </>
   );
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index c6a91fa340..47b9a97c71 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -2009,12 +2009,14 @@ export class MyComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > basicForFragment 1`] = `
-"import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"basic-for-fragment\\",
 })
 export class BasicForFragment {
+  @State() id = \\"xyz\\";
+
   render() {
     return (
       <div>
@@ -2023,6 +2025,18 @@ export class BasicForFragment {
             <div>{option}</div>
           </Fragment>
         ))}
+        {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+          <Fragment key={\`\${this.id}-\${option}\`}>
+            <div>{option}</div>
+          </Fragment>
+        ))}
+        <select>
+          {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+            <option key={\`\${this.id}-\${option}\`} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
       </div>
     );
   }
@@ -6124,12 +6138,14 @@ export class MyComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > basicForFragment 1`] = `
-"import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"basic-for-fragment\\",
 })
 export class BasicForFragment {
+  @State() id = \\"xyz\\";
+
   render() {
     return (
       <div>
@@ -6138,6 +6154,18 @@ export class BasicForFragment {
             <div>{option}</div>
           </Fragment>
         ))}
+        {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+          <Fragment key={\`\${this.id}-\${option}\`}>
+            <div>{option}</div>
+          </Fragment>
+        ))}
+        <select>
+          {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+            <option key={\`\${this.id}-\${option}\`} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
       </div>
     );
   }
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 59c19c2c1a..2d4bf25a51 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1568,10 +1568,23 @@ exports[`Svelte > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
 `;
 
 exports[`Svelte > jsx > Javascript Test > basicForFragment 1`] = `
-"<div>
+"<script>
+  let id = \\"xyz\\";
+</script>
+
+<div>
   {#each [\\"a\\", \\"b\\", \\"c\\"] as option (\`key-\${option}\`)}
     <div>{option}</div>
   {/each}
+
+  {#each [\\"a\\", \\"b\\", \\"c\\"] as option (\`\${id}-\${option}\`)}
+    <div>{option}</div>
+  {/each}
+  <select>
+    {#each [\\"d\\", \\"e\\", \\"f\\"] as option (\`\${id}-\${option}\`)}
+      <option value={option}>{option}</option>
+    {/each}
+  </select>
 </div>"
 `;
 
@@ -4981,12 +4994,22 @@ exports[`Svelte > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
 
 exports[`Svelte > jsx > Typescript Test > basicForFragment 1`] = `
 "<script lang=\\"ts\\">
+  let id = \\"xyz\\";
 </script>
 
 <div>
   {#each [\\"a\\", \\"b\\", \\"c\\"] as option (\`key-\${option}\`)}
     <div>{option}</div>
   {/each}
+
+  {#each [\\"a\\", \\"b\\", \\"c\\"] as option (\`\${id}-\${option}\`)}
+    <div>{option}</div>
+  {/each}
+  <select>
+    {#each [\\"d\\", \\"e\\", \\"f\\"] as option (\`\${id}-\${option}\`)}
+      <option value={option}>{option}</option>
+    {/each}
+  </select>
 </div>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index f3464bbee9..532b08e5ce 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -1681,10 +1681,14 @@ export default MyComponent;
 `;
 
 exports[`Taro > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
 
 function BasicForFragment(props) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <View>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -1692,6 +1696,18 @@ function BasicForFragment(props) {
           <View>{option}</View>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <View>{option}</View>
+        </React.Fragment>
+      ))}
+      <View>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <View key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </View>
+        ))}
+      </View>
     </View>
   );
 }
@@ -5618,10 +5634,14 @@ export default MyComponent;
 `;
 
 exports[`Taro > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
 
 function BasicForFragment(props: any) {
+  const [id, setId] = useState(() => \\"xyz\\");
+
   return (
     <View>
       {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
@@ -5629,6 +5649,18 @@ function BasicForFragment(props: any) {
           <View>{option}</View>
         </React.Fragment>
       ))}
+      {[\\"a\\", \\"b\\", \\"c\\"]?.map((option) => (
+        <React.Fragment key={\`\${id}-\${option}\`}>
+          <View>{option}</View>
+        </React.Fragment>
+      ))}
+      <View>
+        {[\\"d\\", \\"e\\", \\"f\\"]?.map((option) => (
+          <View key={\`\${id}-\${option}\`} value={option}>
+            {option}
+          </View>
+        ))}
+      </View>
     </View>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index dc06581a78..e25007a4b0 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1673,10 +1673,28 @@ exports[`Vue > jsx > Javascript Test > basicForFragment 1`] = `
 "<template>
   <div>
     <template :key=\\"\`key-\${option}\`\\" v-for=\\"(option, index) in ['a', 'b', 'c']\\">
-      <div>{{ option }}</div>
-    </template>
+      <div>{{ option }}</div> </template
+    ><template
+      :key=\\"\`\${id}-\${option}\`\\"
+      v-for=\\"(option, index) in ['a', 'b', 'c']\\"
+    >
+      <div>{{ option }}</div> </template
+    ><select>
+      <template
+        :key=\\"\`\${id}-\${option}\`\\"
+        v-for=\\"(option, index) in ['d', 'e', 'f']\\"
+      >
+        <option :value=\\"option\\">{{ option }}</option>
+      </template>
+    </select>
   </div>
-</template>"
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const id = ref(\\"xyz\\");
+</script>"
 `;
 
 exports[`Vue > jsx > Javascript Test > basicForNoTagReference 1`] = `
@@ -5218,10 +5236,28 @@ exports[`Vue > jsx > Typescript Test > basicForFragment 1`] = `
 "<template>
   <div>
     <template :key=\\"\`key-\${option}\`\\" v-for=\\"(option, index) in ['a', 'b', 'c']\\">
-      <div>{{ option }}</div>
-    </template>
+      <div>{{ option }}</div> </template
+    ><template
+      :key=\\"\`\${id}-\${option}\`\\"
+      v-for=\\"(option, index) in ['a', 'b', 'c']\\"
+    >
+      <div>{{ option }}</div> </template
+    ><select>
+      <template
+        :key=\\"\`\${id}-\${option}\`\\"
+        v-for=\\"(option, index) in ['d', 'e', 'f']\\"
+      >
+        <option :value=\\"option\\">{{ option }}</option>
+      </template>
+    </select>
   </div>
-</template>"
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+const id = ref(\\"xyz\\");
+</script>"
 `;
 
 exports[`Vue > jsx > Typescript Test > basicForNoTagReference 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index f7f020af64..14dd49c49a 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -1966,8 +1966,20 @@ exports[`Vue > jsx > Javascript Test > basicForFragment 1`] = `
 "<template>
   <div>
     <template :key=\\"\`key-\${option}\`\\" v-for=\\"(option, index) in ['a', 'b', 'c']\\">
-      <div>{{ option }}</div>
-    </template>
+      <div>{{ option }}</div> </template
+    ><template
+      :key=\\"\`\${id}-\${option}\`\\"
+      v-for=\\"(option, index) in ['a', 'b', 'c']\\"
+    >
+      <div>{{ option }}</div> </template
+    ><select>
+      <template
+        :key=\\"\`\${id}-\${option}\`\\"
+        v-for=\\"(option, index) in ['d', 'e', 'f']\\"
+      >
+        <option :value=\\"option\\">{{ option }}</option>
+      </template>
+    </select>
   </div>
 </template>
 
@@ -1976,6 +1988,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"basic-for-fragment\\",
+
+  data() {
+    return { id: \\"xyz\\" };
+  },
 });
 </script>"
 `;
@@ -6422,8 +6438,20 @@ exports[`Vue > jsx > Typescript Test > basicForFragment 1`] = `
 "<template>
   <div>
     <template :key=\\"\`key-\${option}\`\\" v-for=\\"(option, index) in ['a', 'b', 'c']\\">
-      <div>{{ option }}</div>
-    </template>
+      <div>{{ option }}</div> </template
+    ><template
+      :key=\\"\`\${id}-\${option}\`\\"
+      v-for=\\"(option, index) in ['a', 'b', 'c']\\"
+    >
+      <div>{{ option }}</div> </template
+    ><select>
+      <template
+        :key=\\"\`\${id}-\${option}\`\\"
+        v-for=\\"(option, index) in ['d', 'e', 'f']\\"
+      >
+        <option :value=\\"option\\">{{ option }}</option>
+      </template>
+    </select>
   </div>
 </template>
 
@@ -6432,6 +6460,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"basic-for-fragment\\",
+
+  data() {
+    return { id: \\"xyz\\" };
+  },
 });
 </script>"
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index df5c975635..19d0e8a5d7 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -7700,7 +7700,7 @@ class BasicForFragment extends HTMLElement {
     super();
     const self = this;
 
-    this.state = {};
+    this.state = { id: \\"xyz\\" };
     if (!this.props) {
       this.props = {};
     }
@@ -7729,6 +7729,19 @@ class BasicForFragment extends HTMLElement {
             <template data-el=\\"div-basic-for-fragment-1\\"><!-- option --></template>
           </div>
         </template>
+      
+        <template data-el=\\"for-basic-for-fragment-2\\">
+          <div>
+            <template data-el=\\"div-basic-for-fragment-2\\"><!-- option --></template>
+          </div>
+        </template>
+        <select data-dom-state=\\"BasicForFragment-select-basic-for-fragment-1\\">
+          <template data-el=\\"for-basic-for-fragment-3\\">
+            <option data-el=\\"option-basic-for-fragment-1\\">
+              <template data-el=\\"div-basic-for-fragment-3\\"><!-- option --></template>
+            </option>
+          </template>
+        </select>
       </div>\`;
     this.pendingUpdate = true;
 
@@ -7753,9 +7766,46 @@ class BasicForFragment extends HTMLElement {
   }
 
   render() {
+    // grab previous input state
+    const preStateful = this.getStateful(this._root);
+    const preValues = this.prepareHydrate(preStateful);
+
     // re-rendering needs to ensure that all nodes generated by for/show are refreshed
     this.destroyAnyNodes();
     this.updateBindings();
+
+    // hydrate input state
+    if (preValues.length) {
+      const nextStateful = this.getStateful(this._root);
+      this.hydrateDom(preValues, nextStateful);
+    }
+  }
+
+  getStateful(el) {
+    const stateful = el.querySelectorAll(\\"[data-dom-state]\\");
+    return stateful ? Array.from(stateful) : [];
+  }
+  prepareHydrate(stateful) {
+    return stateful.map((el) => {
+      return {
+        id: el.dataset.domState,
+        value: el.value,
+        active: document.activeElement === el,
+        selectionStart: el.selectionStart,
+      };
+    });
+  }
+  hydrateDom(preValues, stateful) {
+    return stateful.map((el, index) => {
+      const prev = preValues.find((prev) => el.dataset.domState === prev.id);
+      if (prev) {
+        el.value = prev.value;
+        if (prev.active) {
+          el.focus();
+          el.selectionStart = prev.selectionStart;
+        }
+      }
+    });
   }
 
   updateBindings() {
@@ -7772,6 +7822,42 @@ class BasicForFragment extends HTMLElement {
         const option = this.getScope(el, \\"option\\");
         this.renderTextNode(el, option);
       });
+
+    this._root
+      .querySelectorAll(\\"[data-el='for-basic-for-fragment-2']\\")
+      .forEach((el) => {
+        let array = [\\"a\\", \\"b\\", \\"c\\"];
+        this.renderLoop(el, array, \\"option\\");
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-basic-for-fragment-2']\\")
+      .forEach((el) => {
+        const option = this.getScope(el, \\"option\\");
+        this.renderTextNode(el, option);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='for-basic-for-fragment-3']\\")
+      .forEach((el) => {
+        let array = [\\"d\\", \\"e\\", \\"f\\"];
+        this.renderLoop(el, array, \\"option\\");
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='option-basic-for-fragment-1']\\")
+      .forEach((el) => {
+        const option = this.getScope(el, \\"option\\");
+        el.key = \`\${this.state.id}-\${option}\`;
+        el.value = option;
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-basic-for-fragment-3']\\")
+      .forEach((el) => {
+        const option = this.getScope(el, \\"option\\");
+        this.renderTextNode(el, option);
+      });
   }
 
   // Helper to render content
@@ -24374,7 +24460,7 @@ class BasicForFragment extends HTMLElement {
     super();
     const self = this;
 
-    this.state = {};
+    this.state = { id: \\"xyz\\" };
     if (!this.props) {
       this.props = {};
     }
@@ -24403,6 +24489,19 @@ class BasicForFragment extends HTMLElement {
             <template data-el=\\"div-basic-for-fragment-1\\"><!-- option --></template>
           </div>
         </template>
+      
+        <template data-el=\\"for-basic-for-fragment-2\\">
+          <div>
+            <template data-el=\\"div-basic-for-fragment-2\\"><!-- option --></template>
+          </div>
+        </template>
+        <select data-dom-state=\\"BasicForFragment-select-basic-for-fragment-1\\">
+          <template data-el=\\"for-basic-for-fragment-3\\">
+            <option data-el=\\"option-basic-for-fragment-1\\">
+              <template data-el=\\"div-basic-for-fragment-3\\"><!-- option --></template>
+            </option>
+          </template>
+        </select>
       </div>\`;
     this.pendingUpdate = true;
 
@@ -24427,9 +24526,46 @@ class BasicForFragment extends HTMLElement {
   }
 
   render() {
+    // grab previous input state
+    const preStateful = this.getStateful(this._root);
+    const preValues = this.prepareHydrate(preStateful);
+
     // re-rendering needs to ensure that all nodes generated by for/show are refreshed
     this.destroyAnyNodes();
     this.updateBindings();
+
+    // hydrate input state
+    if (preValues.length) {
+      const nextStateful = this.getStateful(this._root);
+      this.hydrateDom(preValues, nextStateful);
+    }
+  }
+
+  getStateful(el) {
+    const stateful = el.querySelectorAll(\\"[data-dom-state]\\");
+    return stateful ? Array.from(stateful) : [];
+  }
+  prepareHydrate(stateful) {
+    return stateful.map((el) => {
+      return {
+        id: el.dataset.domState,
+        value: el.value,
+        active: document.activeElement === el,
+        selectionStart: el.selectionStart,
+      };
+    });
+  }
+  hydrateDom(preValues, stateful) {
+    return stateful.map((el, index) => {
+      const prev = preValues.find((prev) => el.dataset.domState === prev.id);
+      if (prev) {
+        el.value = prev.value;
+        if (prev.active) {
+          el.focus();
+          el.selectionStart = prev.selectionStart;
+        }
+      }
+    });
   }
 
   updateBindings() {
@@ -24446,6 +24582,42 @@ class BasicForFragment extends HTMLElement {
         const option = this.getScope(el, \\"option\\");
         this.renderTextNode(el, option);
       });
+
+    this._root
+      .querySelectorAll(\\"[data-el='for-basic-for-fragment-2']\\")
+      .forEach((el) => {
+        let array = [\\"a\\", \\"b\\", \\"c\\"];
+        this.renderLoop(el, array, \\"option\\");
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-basic-for-fragment-2']\\")
+      .forEach((el) => {
+        const option = this.getScope(el, \\"option\\");
+        this.renderTextNode(el, option);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='for-basic-for-fragment-3']\\")
+      .forEach((el) => {
+        let array = [\\"d\\", \\"e\\", \\"f\\"];
+        this.renderLoop(el, array, \\"option\\");
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='option-basic-for-fragment-1']\\")
+      .forEach((el) => {
+        const option = this.getScope(el, \\"option\\");
+        el.key = \`\${this.state.id}-\${option}\`;
+        el.value = option;
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-basic-for-fragment-3']\\")
+      .forEach((el) => {
+        const option = this.getScope(el, \\"option\\");
+        this.renderTextNode(el, option);
+      });
   }
 
   // Helper to render content
diff --git a/packages/core/src/__tests__/data/for/basic-for-fragment.raw.tsx b/packages/core/src/__tests__/data/for/basic-for-fragment.raw.tsx
index 13053674f0..a49f1e4f27 100644
--- a/packages/core/src/__tests__/data/for/basic-for-fragment.raw.tsx
+++ b/packages/core/src/__tests__/data/for/basic-for-fragment.raw.tsx
@@ -1,6 +1,10 @@
-import { For, Fragment } from '@builder.io/mitosis';
+import { For, Fragment, useStore } from '@builder.io/mitosis';
 
 export default function BasicForFragment() {
+  const state = useStore({
+    id: 'xyz',
+  });
+
   return (
     <div>
       <For each={['a', 'b', 'c']}>
@@ -10,6 +14,22 @@ export default function BasicForFragment() {
           </Fragment>
         )}
       </For>
+      <For each={['a', 'b', 'c']}>
+        {(option) => (
+          <Fragment key={`${state.id}-${option}`}>
+            <div>{option}</div>
+          </Fragment>
+        )}
+      </For>
+      <select>
+        <For each={['d', 'e', 'f']}>
+          {(option) => (
+            <option key={`${state.id}-${option}`} value={option}>
+              {option}
+            </option>
+          )}
+        </For>
+      </select>
     </div>
   );
 }
diff --git a/packages/core/src/generators/angular/helpers.ts b/packages/core/src/generators/angular/helpers.ts
index dd602f5071..7a9776a76a 100644
--- a/packages/core/src/generators/angular/helpers.ts
+++ b/packages/core/src/generators/angular/helpers.ts
@@ -1,5 +1,6 @@
 import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { type MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode } from '@/types/mitosis-node';
 
 export const HELPER_FUNCTIONS = (
   isTs?: boolean,
@@ -121,3 +122,16 @@ export const transformState = (json: MitosisComponent) => {
       }
     });
 };
+
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+export const hasFirstChildKeyAttribute = (node: MitosisNode): boolean => {
+  if (!node.children || node.children.length === 0) {
+    return false;
+  }
+
+  const firstChildBinding = node.children[0].bindings;
+  return Boolean(firstChildBinding && firstChildBinding.key?.code);
+};
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index c7c35ae389..b31710901d 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -52,6 +52,7 @@ import {
   addCodeToOnUpdate,
   getAppropriateTemplateFunctionKeys,
   getDefaultProps,
+  hasFirstChildKeyAttribute,
   makeReactiveState,
   transformState,
 } from './helpers';
@@ -351,7 +352,7 @@ export const blockToAngular = ({
     const forName = json.scope.forName;
 
     // Check if "key" is present for the first child of the for loop
-    if (json.children[0].bindings && json.children[0].bindings.key?.code) {
+    if (hasFirstChildKeyAttribute(json)) {
       const fnIndex = (root.meta?._trackByForIndex as number) || 0;
       const trackByFnName = `trackBy${
         forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''
@@ -835,11 +836,15 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
                 node?.bindings[key]?.type === 'spread' &&
                 VALID_HTML_TAGS.includes(node.name.trim());
 
+              // If we have a For loop with "key" it will be transformed to
+              // trackOfXXX, we need to use "this" for state properties
+              const isKey = key === 'key';
+
               const newLocal = processAngularCode({
                 contextVars: [],
                 outputVars,
                 domRefs: [], // the template doesn't need the this keyword.
-                replaceWith: isSpreadAttributeBinding ? 'this' : undefined,
+                replaceWith: isKey || isSpreadAttributeBinding ? 'this' : undefined,
               })(code);
               return newLocal.replace(/"/g, '&quot;');
             };
diff --git a/packages/core/src/generators/react/helpers.ts b/packages/core/src/generators/react/helpers.ts
index 30f20ac2dd..b4ba8e9292 100644
--- a/packages/core/src/generators/react/helpers.ts
+++ b/packages/core/src/generators/react/helpers.ts
@@ -27,8 +27,9 @@ export function getFragment(type: 'open' | 'close', options: ToReactOptions, nod
   let tag = '';
   if (node && node.bindings && isFragmentWithKey(node)) {
     tag = options.preact ? 'Fragment' : 'React.Fragment';
-    if (type === 'open') {
-      tag += ` key={${node.bindings['key']?.code}}`;
+    const keyCode = node.bindings['key']?.code;
+    if (type === 'open' && keyCode) {
+      tag += ` key={${processBinding(keyCode, options)}}`;
     }
   } else if (options.preact) {
     tag = 'Fragment';