Reactjs 如何通过单击多个选项中的特定项目在模态上呈现不同的标题

我正在构建一个应用程序，在那里我有不同的座位供用户预订，逻辑是，当你点击一个座位时，模式会显示出来，然后你点击确认，然后你会被重定向到另一个屏幕，显示座位加一.我需要的是，当我点击一个座位时，它应该显示该座位的名称(例如，"您已经 Select 了1个座位")，而当我点击确认时，它应该只会在另一个屏幕上增加该座位的编号.我需要的帮助是弄清楚如何在模式上呈现特定的标题，以及如何激发不同的函数来增加每个项目的编号，这样我就可以避免在几个组件中重复代码.提前谢谢您.以下是我的代码:

Seat.jsx:个

import React, { useEffect, useState } from "react";
import "./zones.css";
import { RxCross2 } from "react-icons/rx";
import {
  addSeat_1,
  add_2,
  addSeat_3,
  addSeat_4,
  addSeat_5,
} from "../../../features/trolleys/trolleySlice";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";

const Seats = () => {
  const [show, setShow] = useState(false);
  const [title, setTitle] = useState({
    data: [
      {
        value: "Seat 1",
        id: 1,
      },
      {
        value: "Seat 2",
        id: 2,
      },
      {
        value: "Seat 3",
        id: 3,
      },
      {
        value: "Seat 4",
        id: 4,
      },

      {
        value: "Seat 5",
        id: 5,
      },
    ],
  });

  const toggleTitle = () => {
    setTitle(title.data.map((item) => item.value === item.id && item.value));
  };

  const dispatch = useDispatch();

  useEffect(() => {
    document.title = "Zones";
  });

  return (
    <div className="seat__container">
      <div onClick={() => setShow(true)} className="seat seat__fresh">
        <img src="/assets/freshGoods.png" alt="fresh" />
        <p className="seat__text">Seat 1</p>
      </div>
      <div onClick={() => setShow(true)} className="seat seat__fruits">
        <img src="/assets/fruit_veg.png" alt="dry/good" />
        <p className="seat__text">Seat 2</p>
      </div>
      <div onClick={() => setShow(true)} className="seat seat__deli">
        <img src="/assets/deli.png" alt="dry/good" />
        <p className="seat__text">Seat 3</p>
      </div>
      <div onClick={() => setShow(true)} className="seat seat__frozen">
        <img src="/assets/frozen.png" alt="dry/good" />
        <p className="seat__frozen">Seat 4</p>
      </div>
      <div onClick={() => setShow(true)} className="seat seat__WindSpritz">
        <img src="/assets/wine_spritz.png" alt="electronic" />
        <p className="seat__text">Seat 5</p>
      </div>
      <div className="seat seat__undraw">
        <img
          className="undraw"
          src="/assets/undraw_gone_shopping_re_2lau 1.png"
          alt="undraw"
        />
      </div>
      {show && (
        <div className="modal">
          <div className="inner__modal">
            <RxCross2 onClick={() => setShow(false)} />
            <p className="selected__text">You have selected</p>

        <p onClick={toggleTitle} className="item__name">
           {/*a specific name for a seat about should be displayed here*/}
          
        </p>

        {title.data.map((item) =>(
  

       <Link
     onClick={() => {
     item.value==="seat 1"&&dispatch(addSeat_1())
     item.value==="seat 1"&&dispatch(addSeat_2())
    item.value==="seat 1"&&dispatch(addSeat_3())
    item.value==="seat 1"&&dispatch(addSeat_4())
     item.value==="seat 1"&&dispatch(addSeat_5())
   }}
  to="/room"
   className="confirm__btn"
   >
   Confirm
   </Link>
    ))}
        <button onClick={() => setShow(false)} className="cancel__btn">
          Cancel
        </button>
      </div>
    </div>
  )}
</div>

  );
};

export default Seats;

Room.jsx:个

import "./room.css";
import { GiCancel } from "react-icons/gi";
import { useEffect } from "react";
import { useSelector } from "react-redux";

const Room = () => {
  const roomQty = useSelector((state) => state.room);

  useEffect(() => {
    document.title = "Room";
  });

  return (
    <div className="room__container">
      <div className="room__list">
        <div className="room__item__box room__item__box__fresh">
          <div className="left__items">
            <div className="image__box">
              <img src="/assets/seat1s.png" alt="img" />
            </div>
            <p className="room__text">Seat1</p>
          </div>
          <div className="right__items">
            <span className="item__count">{roomQty.seat1Qty}</span>

            <div className="button__items">
              <GiCancel className="cancel" />
              <button className="cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div className="room__item__box room__item__box__fruit-veg">
          <div className="left__items">
            <div className="image__box">
              <img src="/assets/seat2.png" alt="img" />
            </div>
            <p className="room__text">Seat2</p>
          </div>
          <div className="right__items">
            <span className="item__count">{roomQty.seat2Qty}</span>
            <div className="button__items">
              <GiCancel className="cancel" />
              <button className="cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div className="room__item__box">
          <div className="left__items">
            <div className="image__box">
              <img src="/assets/seat3.png" alt="img" />
            </div>
            <p className="room__text">Seat3</p>
          </div>
          <div className="right__items">
            <span className="item__count">{roomQty.seat3Qty}</span>
            <div className="button__items">
              <GiCancel className="cancel" />
              <button className="cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div className="room__item__box room__item__box__frozen">
          <div className="left__items">
            <div className="image__box">
              <img src="/assets/seat4.png" alt="img" />
            </div>
            <p className="room__text">Seat4</p>
          </div>
          <div className="right__items">
            <span className="item__count">{roomQty.seat4Qty}</span>

            <div className="button__items">
              <GiCancel className="cancel" />
              <button className="cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div className="room__item__box room__item__box__wineSpritz">
          <div className="left__items">
            <div className="image__box">
              <img src="/assets/seat5.png" alt="img" />
            </div>
            <p className="room__text">Seat5</p>
          </div>
          <div className="right__items">
            <span className="item__count">{roomQty.seat5Qty}</span>
            <div className="button__items">
              <GiCancel className="cancel" />
              <button className="cancel">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Room;