In React, props (short for "properties") let you pass data from a parent component to a child component. They help make components reusable and dynamic.
1. Basic Prop Passing
Example
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Agent 101" />;
}
-
Apppasses the propnametoGreeting. -
Greetingaccesses it viaprops.name.
2. Destructuring Props
Cleaner Syntax
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
- Same result, but cleaner code.
3. Multiple Props
function Profile({ name, role }) {
return <p>{name} is a {role}</p>;
}
function App() {
return <Profile name="Agent 101" role="CIA" />;
}
4. Passing Functions as Props
function Button({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
function App() {
const handleClick = () => alert('Clicked!');
return <Button onClick={handleClick} />;
}
- Useful for child-to-parent communication.
5. Passing Children
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<p>This is inside the card.</p>
</Card>
);
}
-
childrenis a special prop for nested JSX.
Summary
- Pass data using attributes:
<Component propName="value" /> - Access with
props.propNameor destructuring - Props keep components flexible and reusable