xxxxxxxxxx
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>
);
}
xxxxxxxxxx
interface EmployeeProps {
name: string;
age: number;
country: string;
}
function Employee({name, age, country}: EmployeeProps) {
return (
<div>
<h2>{name}</h2>
<h2>{age}</h2>
<h2>{country}</h2>
</div>
);
}
export default function App() {
const obj = {name: 'Alice', age: 29, country: 'Austria'};
return (
<div>
<Employee {obj} />
</div>
);
}
xxxxxxxxxx
const UserCard = props => {
const name = props.user.name
const role = props.user.role
const age = props.user.age
const profilePic = props.user.profilePic
return (
<div>
<p>Name: {name}</p>
<p>Role: {role}</p>
<p>Age: {age}</p>
<img src={profilePic} alt={name} />
</div>
)
}
function App() {
const user = {
name: "Ranjeet",
role: "WordPress Developer",
age: 27,
profilePic: "image.jpg",
}
return (
<div>
<UserCard user={user} />
</div>
)
}
export default App