Skip to content

Commit 3a20ba5

Browse files
fix(docsdemo, playground): add keys to list items (#2940)
1 parent f143f30 commit 3a20ba5

File tree

2 files changed

+11
-8
lines changed

2 files changed

+11
-8
lines changed

src/components/global/DocDemo/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const DocDemo = (props) => {
4848
})}
4949
title={`Toggle ${mode === 'ios' ? 'iOS' : 'Android'} mode`}
5050
onClick={() => setIonicMode(mode)}
51+
key={mode}
5152
>
5253
{mode === 'ios' ? 'iOS' : 'Android'}
5354
</button>

src/components/global/Playground/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -567,36 +567,38 @@ export default function Playground({
567567
</div>
568568
{renderIframes
569569
? [
570-
<div className="playground__preview">
570+
<div className="playground__preview" key="preview">
571571
{!iframesLoaded && renderLoadingScreen()}
572572
{/*
573-
We render two iframes, one for each mode.
574-
When the set mode changes, we hide one frame and
575-
show the other. This is done to avoid flickering
576-
and doing unnecessary reloads when switching modes.
577-
*/}
573+
We render two iframes, one for each mode.
574+
When the set mode changes, we hide one frame and
575+
show the other. This is done to avoid flickering
576+
and doing unnecessary reloads when switching modes.
577+
*/}
578578
{devicePreview
579579
? [
580-
<div className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
580+
<div key="ios-iframe" className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
581581
<device-preview mode="ios">
582582
<iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
583583
</device-preview>
584584
</div>,
585-
<div className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
585+
<div key="md-iframe" className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
586586
<device-preview mode="md">
587587
<iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
588588
</device-preview>
589589
</div>,
590590
]
591591
: [
592592
<iframe
593+
key="ios-iframe"
593594
height={frameSize}
594595
className={!isIOS ? 'frame-hidden' : ''}
595596
ref={(ref) => handleFrameRef(ref, 'ios')}
596597
src={sourceiOS}
597598
aria-hidden={!isIOS ? 'true' : null}
598599
></iframe>,
599600
<iframe
601+
key="md-iframe"
600602
height={frameSize}
601603
className={!isMD ? 'frame-hidden' : ''}
602604
ref={(ref) => handleFrameRef(ref, 'md')}

0 commit comments

Comments
 (0)