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);
-    };
+    setPerformers(cards);
   }, []);
 
   const togglePerformerDesc = (id: number) => {
@@ -37,50 +35,48 @@ 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)}
-          >
-            <Image
-              className={styles.performerImage}
-              src={p.imagePath}
-              width={100}
-              height={100}
-              layout='fixed'
-            />
-            <div className={styles.performerTextContainer}>
-              <div className={styles.performerTitle}>
-                <h2>{p.name}</h2>
-                <button className={shared.openingChevron}>
-                  {p.showDesc ? (
-                    <BiChevronDown size='3rem' />
-                  ) : (
-                    <BiChevronLeft size='3rem' />
-                  )}
-                </button>
-              </div>
-              {p.showDesc && (
-                <>
-                  {p.paragraphs.map((parag) => (
-                    <p className={styles.performerDescription}>
-                      {parag.toString()}
-                    </p>
-                  ))}
-                </>
-              )}
-              <hr />
+        <div
+          className={styles.performerContainer}
+          onClick={() => togglePerformerDesc(p.id)}
+          key={p.id}
+        >
+          <Image
+            className={styles.performerImage}
+            src={p.imagePath}
+            width={100}
+            height={100}
+            layout='fixed'
+            alt={p.name + ' image'}
+          />
+          <div className={styles.performerTextContainer}>
+            <div className={styles.performerTitle}>
+              <h2>{p.name}</h2>
+              <button className={shared.openingChevron}>
+                {p.showDesc ? (
+                  <BiChevronDown size='3rem' />
+                ) : (
+                  <BiChevronLeft size='3rem' />
+                )}
+              </button>
             </div>
+            {p.showDesc && (
+              <>
+                {p.paragraphs.map((parag, index) => (
+                  <p className={styles.performerDescription} key={index}>
+                    {parag.toString()}
+                  </p>
+                ))}
+              </>
+            )}
+            <hr />
           </div>
-        </>
+        </div>
       ))}
     </section>
   );