react/jsx-key fix

pioneer/packages/joy-media/src/channels/ViewMusicChannel.tsx

@@ -27,7 +27,7 @@ export function ViewMusicChannel (props: Props) {
     !albums.length
       ? <NoAlbums />
       : <Section title={'Music albums'}>
-        {albums.map(x => <MusicAlbumPreview {...x} />)}
+        {albums.map(x => <MusicAlbumPreview key={x.id} {...x} />)}
       </Section>
   );
 
@@ -35,7 +35,7 @@ export function ViewMusicChannel (props: Props) {
     !tracks.length
       ? <NoTracks />
       : <Section title={'Music tracks'}>
-        {tracks.map(x => <MusicTrackReaderPreview {...x} />)}
+        {tracks.map(x => <MusicTrackReaderPreview key={x.id} {...x} />)}
       </Section>
   );
 

pioneer/packages/joy-media/src/explore/PlayContent.tsx

@@ -60,7 +60,7 @@ export function PlayContent (props: Props) {
             const className = 'TrackRow ' + (isCurrent ? 'Current' : '');
 
             return (
-              <Table.Row className={className} onClick={() => setCurrentTrack(x)}>
+              <Table.Row key={x.id} className={className} onClick={() => setCurrentTrack(x)}>
                 <Table.Cell className='TrackNumber' width={1}>{i + 1}</Table.Cell>
                 <Table.Cell className='TrackTitle'>{x.title}</Table.Cell>
               </Table.Row>
@@ -85,7 +85,7 @@ export function PlayContent (props: Props) {
     {featuredAlbums.length > 0 &&
       <div className='JoyPlayAlbum_RightSidePanel'>
         <h3>Featured albums</h3>
-        {featuredAlbums.map(x => <MusicAlbumPreview {...x} size={170} />)}
+        {featuredAlbums.map(x => <MusicAlbumPreview key={x.id} {...x} size={170} />)}
       </div>
     }
   </div>;

pioneer/packages/joy-roles/src/flows/apply.elements.stories.tsx

@@ -436,7 +436,7 @@ export function StageAConfirmStakes () {
   return (
     <Container className="apply-flow">
       {renders.map((render, key) => (
-        <div>{render}</div>
+        <div key={key}>{render}</div>
       ))}
     </Container>
   );

pioneer/packages/joy-roles/src/flows/apply.tsx

@@ -1144,23 +1144,23 @@ export const FlowModal = Loadable<FlowModalProps>(
       setSelectedRoleStake: setRoleStake
     };
 
-    const stages = new Map<ProgressSteps, any>([
-      [ProgressSteps.ConfirmStakes, <ConfirmStakesStage
+    const stages: { [k in ProgressSteps]: JSX.Element } = {
+      [ProgressSteps.ConfirmStakes]: (<ConfirmStakesStage
         {...props}
         nextTransition={enterApplicationDetailsState}
         prevTransition={cancel}
         {...setStakeProps}
-      />],
+      />),
 
-      [ProgressSteps.ApplicationDetails, <ApplicationDetailsStage
+      [ProgressSteps.ApplicationDetails]: (<ApplicationDetailsStage
         setData={setAppDetails}
         data={appDetails}
         applicationDetails={props.role.application}
         nextTransition={enterSubmitApplicationState}
         prevTransition={() => { props.hasConfirmStep ? enterConfirmStakeState() : cancel(); }}
-      />],
+      />),
 
-      [ProgressSteps.SubmitApplication, <SubmitApplicationStage
+      [ProgressSteps.SubmitApplication]: (<SubmitApplicationStage
         {...props}
         nextTransition={enterDoneState}
         prevTransition={enterApplicationDetailsState}
@@ -1168,10 +1168,10 @@ export const FlowModal = Loadable<FlowModalProps>(
         setKeyAddress={setTxKeyAddress}
         transactionDetails={props.transactionDetails}
         totalStake={Add(applicationStake, roleStake)}
-      />],
+      />),
 
-      [ProgressSteps.Done, <DoneStage {...props} roleKeyName={props.roleKeyName} />]
-    ]);
+      [ProgressSteps.Done]: (<DoneStage {...props} roleKeyName={props.roleKeyName} />)
+    };
 
     const cancelText = complete ? 'Close' : 'Cancel application';
 
@@ -1196,7 +1196,7 @@ export const FlowModal = Loadable<FlowModalProps>(
           <Grid columns="equal">
             <Grid.Column width={11} className="main">
               <ProgressStepsView activeStep={activeStep} hasConfirmStep={props.hasConfirmStep} />
-              {stages.get(activeStep)}
+              {stages[activeStep]}
             </Grid.Column>
             <Grid.Column width={5} className="summary">
               <Header as='h3'>{props.role.headline}</Header>

pioneer/packages/joy-roles/src/tabs/Admin.controller.tsx

@@ -760,6 +760,7 @@ export const AdminView = View<AdminController, State>(
                     stockOpenings.map((value, key) => {
                       return (
                         <Dropdown.Item
+                          key={value.title}
                           text={value.title}
                           onClick={() => controller.showNewOpeningModal(value)}
                         />