Fixing performer data rendering for deployment

pages/performers.tsx

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import styles from '../styles/Performers.module.scss';
 import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
-import performers2021 from '../data/performers/2022';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+import PerformersData from '../data/performers/2022';
 
 interface PerformerCard extends Performer {
   id: number;
@@ -17,14 +17,12 @@ const Performers = () => {
   useEffect(() => {
     let cards: PerformerCard[] = [];
 
-    performers2021.map((p, index) => {
+    PerformersData.map((p, index) => {
       let newCard = { ...p, id: index, showDesc: false };
       cards.push(newCard);
     });
 
-    return () => {
     setPerformers(cards);
-    };
   }, []);
 
   const togglePerformerDesc = (id: number) => {
@@ -37,18 +35,16 @@ const Performers = () => {
     });
 
     setPerformers(updated);
-
-    console.log(performers);
   };
 
   return (
     <section className={shared.page}>
       <h1>Esiintyjät</h1>
       {performers.map((p) => (
-        <>
         <div
           className={styles.performerContainer}
           onClick={() => togglePerformerDesc(p.id)}
+          key={p.id}
         >
           <Image
             className={styles.performerImage}
@@ -56,6 +52,7 @@ const Performers = () => {
             width={100}
             height={100}
             layout='fixed'
+            alt={p.name + ' image'}
           />
           <div className={styles.performerTextContainer}>
             <div className={styles.performerTitle}>
@@ -70,8 +67,8 @@ const Performers = () => {
             </div>
             {p.showDesc && (
               <>
-                  {p.paragraphs.map((parag) => (
-                    <p className={styles.performerDescription}>
+                {p.paragraphs.map((parag, index) => (
+                  <p className={styles.performerDescription} key={index}>
                     {parag.toString()}
                   </p>
                 ))}
@@ -80,7 +77,6 @@ const Performers = () => {
             <hr />
           </div>
         </div>
-        </>
       ))}
     </section>
   );