From 522cc1f2c647cac5c0ddb1c3fd295c1d1a906eea Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 27 Apr 2023 14:00:19 -0500
Subject: [PATCH] fix(docsdemo, playground): add keys to list items

---
 src/components/global/DocDemo/index.js     |  1 +
 src/components/global/Playground/index.tsx | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/global/DocDemo/index.js b/src/components/global/DocDemo/index.js
index d43d6ed2f8a..b7611be1910 100644
--- a/src/components/global/DocDemo/index.js
+++ b/src/components/global/DocDemo/index.js
@@ -48,6 +48,7 @@ const DocDemo = (props) => {
           })}
           title={`Toggle ${mode === 'ios' ? 'iOS' : 'Android'} mode`}
           onClick={() => setIonicMode(mode)}
+          key={mode}
         >
           {mode === 'ios' ? 'iOS' : 'Android'}
         </button>
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 2ef8505f1e0..6de23298974 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -567,22 +567,22 @@ export default function Playground({
         </div>
         {renderIframes
           ? [
-              <div className="playground__preview">
+              <div className="playground__preview" key="preview">
                 {!iframesLoaded && renderLoadingScreen()}
                 {/*
-              We render two iframes, one for each mode.
-              When the set mode changes, we hide one frame and
-              show the other. This is done to avoid flickering
-              and doing unnecessary reloads when switching modes.
-            */}
+                  We render two iframes, one for each mode.
+                  When the set mode changes, we hide one frame and
+                  show the other. This is done to avoid flickering
+                  and doing unnecessary reloads when switching modes.
+                */}
                 {devicePreview
                   ? [
-                      <div className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
+                      <div key="ios-iframe" className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
                         <device-preview mode="ios">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
                         </device-preview>
                       </div>,
-                      <div className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
+                      <div key="md-iframe" className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
                         <device-preview mode="md">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
                         </device-preview>
@@ -590,6 +590,7 @@ export default function Playground({
                     ]
                   : [
                       <iframe
+                        key="ios-iframe"
                         height={frameSize}
                         className={!isIOS ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'ios')}
@@ -597,6 +598,7 @@ export default function Playground({
                         aria-hidden={!isIOS ? 'true' : null}
                       ></iframe>,
                       <iframe
+                        key="md-iframe"
                         height={frameSize}
                         className={!isMD ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'md')}