格式化问题 - 组件 - 后端

Question

我将尽我所能尝试解释这一点。 （请参阅屏幕截图）- 问题在于：当一个过去的事件从后端出现在主页上时，多个过去的事件组合在一起形成一个可点击的对象。它们应该是可点击的独立事件。我将过去的事件作为主页上的一个组件导入（也许这是错误的做法）。我希望这是有道理的。这是代码和屏幕截图：

import { useState, useEffect } from "react";
import "../components/PastEventDetails.css";
import girl from "../images/girl.png";

const PastEventDetails = () => {
  const [pastEvents, setPastEvents] = useState(null);

  useEffect(() => {
    const fetchPastEvents = async () => {
      const response = await fetch("http://localhost:5001/api/past-events");
      const json = await response.json();

      if (response.ok) {
        setPastEvents(json);
      }
    };

    fetchPastEvents();
  }, []);
  return (
    <div className="past-event-details-container">
      {/* EVENT ICON */}
      <div className="past-event-detail-img">{/* <img src={girl} /> */}</div>

      {/* IMPORT PAST EVENTS FROM BACKEND */}
      <div className="past-event-detail-header">
        {pastEvents &&
          pastEvents.map((pastEvent) => (
            <>
              <h3>{pastEvent.eventName}</h3>
              <p key={pastEvent._id}>{pastEvent.pastEvent}</p>
              <p>{pastEvent.eventDate}</p>
              <p>{pastEvent.numberOfGuests} Guests</p>
            </>
          ))}
      </div>
    </div>
  );
};

export default PastEventDetails;

import { Link } from "react-router-dom";
import AppHeader from "../components/AppHeader";
import FooterNav from "../components/FooterNav";
import PastEventDetails from "../components/PastEventDetails";
import UpcomingEventDetails from "../components/UpcomingEventDetails";
import "./Home.css";

const Home = () => {
  return (
    <>
      <AppHeader />
      <div className="home-container">
        <div className="home-card-container">
          <div className="home-card-top-container">
            <div className="home-card-top-header">Past Events</div>
            <div className="home-card-top-event-container">
              <div className="home-card-top-event">
                <Link to="/past-events/:id" className="link">
                  <PastEventDetails />
                </Link>
              </div>
            </div>
          </div>
          <div className="home-card-bottom-container">
            <div className="home-card-bottom-header">Upcoming Events</div>
            <div className="home-card-bottom-event-container">
              <div className="home-card-bottom-event">
                <Link to="/upcoming-event/:id" className="link">
                  <UpcomingEventDetails />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <FooterNav />
    </>
  );
};

export default Home;