Spread Object as Props
import Header from "./components/Header"
import Entry from "./components/Entry"
import data from "./data"
export default function App() {
const entryElements = data.map((entry) => {
return (
<Entry
key={entry.id}
{...entry}
/>
)
})
return (
<>
<Header />
<main className="container">
{entryElements}
</main>
</>
)
}
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.img.src} alt={props.img.alt} />
</div>
<div className="info-container">
<img className="marker" src={marker} alt="map marker icon" />
<span className="country">{props.country}</span>
<a href={props.entry.googleMapsLink}>View on Google Maps</a>
<h2 className="entry-title">{props.title}</h2>
<p className="trip-dates">{props.dates}</p>
<p className="entry-text">{props.text}</p>
</div>
</article>
);
}