Build reusable components by passing data through props.
Props (short for properties) let you pass data into a component, making it reusable.
type CardProps = {
title: string;
body: string;
};
function Card({ title, body }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
);
}
<Card title="Hello" body="This is a card." />
<Card title="Another" body="Reusable!" />
You can set defaults with destructuring:
function Greeting({ name = "stranger" }: { name?: string }) {
return <p>Hello, {name}!</p>;
}
Create a Greeting component that:
name prop of type string<p> tag with the text Hello, {name}!Then use it in App to render <Greeting name="React" />.
The expected output is a <p> containing Hello, React!.
// Create a Greeting component that accepts a 'name' prop // and renders <p>Hello, {name}!</p> // Then render <Greeting name="React" /> from App export default function App() { return <div>Add your Greeting component here</div>; }