how to pass data in modal?

21 Views Asked by At

component index with 5 components, Project, Navbar, Button, Carousel and Modal

import { projectData, responsive } from "../data/data";

function Index() {
  const [showModal, setShowModal] = useState(false);

  const openModal = (imageurl) => {
    console.log(imageurl.url01, imageurl.url02, imageurl.url03);
    setShowModal(true);
  };

  const closeModal = (imageurl) => {
    setShowModal(false);
  };

  const project = projectData.map((item, index) => (
    <Project
      name={item.name}
      url={item.imageurl}
      key={index}
      openModal={() => openModal(item)}
    />
  ));

  return (
    <main className={styles.main}>
      <Navbar />
      <section className={styles.presentation} id="presentation">
        <div>
          <h2 className={styles.name}>david</h2>
          <h1 className={styles.title}>frontend developer</h1>
        </div>
        <p>blablabla</p>
        <Button content="découvrir" link="#projets" />
      </section>
      <section className={styles.projects__container} id="projets">
        <Carousel infinite={true} responsive={responsive}>
          {project}
        </Carousel>
      </section>
      <section id="skills"></section>
      {showModal && <Modal closeModal={() => closeModal()} />}
    </main>
  );
}

export default Index;

data in another file

export const projectData = [
  {
    id: 1,
    imageurl: "hackatweet.png",
    url01: "hackatweet-01.png",
    url02: "hackatweet-02.png",
    url03: "hackatweet-03.png",
    name: "hackatweet",
  },
  {
    id: 2,
    imageurl: "recipeshop.png",
    url01: "recipeshop-01.png",
    url02: "recipeshop-02.png",
    url03: "recipeshop-03.png",
    name: "recipeshop",
  },
  {
    id: 3,
    imageurl: "tickethack.png",
    url01: "tickethack-01.png",
    url02: "tickethack-02.png",
    url03: "tickethack-03.png",
    name: "tickethack",
  },
];

Hello, my problem is with the 2 components Project and Modal. I want to pass my data from projectData to the component Modal but not all the data, just the data that is associated with the project component.

0

There are 0 best solutions below