Pass Object as Props
import { useState } from "react";
import "./style/TravelJournal.css";
import Entry from "./components/TravelJournal/Entry";
import Header from "./components/TravelJournal/Header";
import TravelData from "./TravelData";
function App() {
const entryElements = TravelData.map((entry) => {
return <Entry key={entry.id} entry={entry} />;
});
return (
<>
<Header />
<main className="container">{entryElements}</main>
</>
);
}
export default App;
import marker from "../../assets/marker.png";
export default function Entry(props) {
console.log(props);
return (
<article className="journal-entry">
<div className="main-image-container">
<img
className="main-image"
src={props.entry.img.src}
alt={props.entry.img.alt}
/>
</div>
<div className="info-container">
<img className="marker" src={marker} alt="map marker icon" />
<span className="country">{props.entry.country}</span>
<a href={props.entry.googleMapsLink}>View on Google Maps</a>
<h2 className="entry-title">{props.entry.title}</h2>
<p className="trip-dates">{props.entry.dates}</p>
<p className="entry-text">{props.entry.text}</p>
</div>
</article>
);
}