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.