Fix main page React key warnings

client/components/MainPage/MainPage.tsx

@@ -16,14 +16,16 @@ import { Marquee } from './Marquee/Marquee';
 const cn = classNames.bind(styles);
 
 export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageTypes) {
+    const marqueeItemsData = marqueeItems.map(({ id, attributes: { message } }) => ({ id, message }))
+
     const getDynamicContent = (dynamicId) => {
         switch (dynamicId) {
             case 'a11y-transport':
                 return <CardTransportA11y {...cardsDynamicData.a11yTransportCounters} />
             case 'traffic-jams':
                 return <CardTrafficJams score={cardsDynamicData.trafficJams} />
             case 'map':
-                return <CardMap  />
+                return <CardMap />
         }
     }
 
@@ -32,7 +34,7 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageType
             <div className={cn(styles.MainPageInner)}>
                 <div className={cn(styles.MainPageLogo)}>
                     <Logo />
-                    <h1 className={cn(styles.MainPageTitle)}>Транспорт<br/>Екатеринбурга</h1>
+                    <h1 className={cn(styles.MainPageTitle)}>Транспорт<br />Екатеринбурга</h1>
                 </div>
 
                 <div className={styles.MainPageCardGrid}>
@@ -54,7 +56,7 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageType
                         })}
                 </div>
 
-                <Marquee items={marqueeItems.map(({ attributes: { message } }) => message)} />
+                <Marquee items={marqueeItemsData} />
             </div>
         </div>
     );

client/components/MainPage/Marquee/Marquee.tsx

@@ -11,8 +11,10 @@ export function Marquee({ items }: MarqueeProps) {
     return (
         <div className={cn(styles.Marquee)}>
             <div className={cn(styles.MarqueeInner)}>
-                {items.map((item) => (
-                    <div className={cn(styles.MarqueeItem)}>{item}</div>
+                {items.map(({ id, message }) => (
+                    <div key={id} className={cn(styles.MarqueeItem)}>
+                        {message}
+                    </div>
                 ))}
             </div>
         </div>

client/components/MainPage/Marquee/Marquee.types.tsx

@@ -1,3 +1,8 @@
 export type MarqueeProps = {
-    items: string[];
+    items: MarqueeItem[],
 };
+
+type MarqueeItem = {
+    id: number,
+    message: string,
+}