FIX: Card Render

src/Components/Event/Event.jsx

@@ -1,7 +1,9 @@
 import styles from "./Event.module.scss";
 import EventCard from "../EventCard/EventCard";
+import Data from "../../Data/EventCardData.json";
+const evCard = Data.cardDataArray;
 
-const Event = ({ data }) => {
+const Event = ({ data, selected }) => {
   return (
     <section className={styles.event}>
       <div className={styles.left} key={data.id}>
@@ -129,7 +131,20 @@ const Event = ({ data }) => {
       </div>
       <div className={styles.right}>
         <h3>Other Events</h3>
-        <EventCard />
+        {evCard
+          .slice(0, selected)
+          .concat(evCard.slice(selected + 1))
+          .map((item) => (
+            <EventCard
+              key={item.id}
+              size="small"
+              id={item.id}
+              content={item.content}
+              title1={item.title1}
+              title2={item.title2}
+              image={item.image}
+            />
+          ))}
       </div>
     </section>
   );

src/Pages/EventPage/EventPage.jsx

@@ -7,7 +7,7 @@ const EventPage = () => {
   const ind = parseInt(eventID.id, 10);
 
   if (ind > 0 && ind <= EventData.length) {
-    return <Event data={EventData[ind - 1]} />;
+    return <Event data={EventData[ind - 1]} selected={ind - 1} />;
   }
   return <div>Error Page</div>;
 };