⚛️ Passing Data with Props

? Quick Overview

In React, props (short for properties) are used to pass data from a parent component to a child component. They enable communication between components and make components reusable and dynamic.

Props are read-only — the child component can access them but cannot modify them. Any changes to data should happen in state (usually in the parent), and updated values are passed down again as props.

? One-way data flow: Parent ➜ Child via props

? Key Concepts

• Props are used to pass data from parent to child components.
• Props are read-only and must never be modified directly by the child.
• Multiple values can be grouped together inside the props object.
• You can destructure props for cleaner and more readable code.
• Functions can be passed as props to allow children to call back into parents.
• Props can hold any data type: strings, numbers, arrays, objects, and functions.

? Basic Example: Passing Data with Props

A parent component can pass props down to a child component just like function arguments. The child receives all props inside a single object called props.

// App.js (parent component passing data to children)
import Greeting from "./Greeting";

function App() {
return (
<div>
<Greeting name="Aman" />
<Greeting name="Riya" />
</div>
);
}

// Greeting.js (child component using the received prop)
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

? Multiple Props Example

You can pass multiple props to a single component. React simply groups them into the props object.

// Passing multiple props to the Profile component
<Profile name="Megha" age={22} city="Pune" />

// Profile component reading values from props
function Profile(props) {
return (
<div>
<h3>Name: {props.name}</h3>
<p>Age: {props.age}</p>
<p>City: {props.city}</p>
</div>
);
}

✂️ Destructuring Props

Instead of accessing every value as props.name, props.age, etc., you can destructure props in the function parameter list for cleaner code.

// Destructuring props directly in the function parameter
function Profile({ name, age, city }) {
return (
<div>
<h3>Name: {name}</h3>
<p>Age: {age}</p>
<p>City: {city}</p>
</div>
);
}

? Passing Functions as Props

You can pass functions as props to allow child components to notify or send data back to their parents. This pattern is often called a callback.

// Parent defines a function and passes it down as a prop
function Parent() {
const handleMessage = (msg) => alert(msg);
return <Child sendMessage={handleMessage} />;
}

// Child calls the parent's function when the button is clicked
function Child({ sendMessage }) {
return (
<button onClick={() => sendMessage("Hello Parent!")}>
Click to Send Message
</button>
);
}

⚙️ Passing Complex Data (Arrays & Objects)

Props can carry complex data types like objects and arrays. This is useful when you need to pass a group of related values.

// Creating an object and passing it as a single prop
const user = { name: "Arjun", age: 25 };

<UserCard data={user} />;

// UserCard component reading fields from the object
function UserCard({ data }) {
return (
<div>
<h3>{data.name}</h3>
<p>Age: {data.age}</p>
</div>
);
}

? Props are Read-only

Props must never be changed inside the child component. If you need to update data, keep it in state (usually in the parent component) and pass the updated value and/or a function as props.

// ❌ Wrong: trying to modify props directly
props.name = "Changed"; // This will not work and should never be done

// ✅ Correct: keep data in state and pass it down as props
function Parent() {
const [name, setName] = useState("Riya");
return <Child name={name} updateName={() => setName("Aman")} />;
}