What Are Props in React? See Example in detail

Props (short for properties) are used to pass data from one component to another. They allow components to communicate, making your UI dynamic and reusable.

Think of props like arguments passed to a function.

---

Why Props Are Important

• They enable data flow between components
• Help make components reusable
• Keep parent and child components connected
• Make UI dynamic and flexible

---

How Props Work

You pass props from a parent component:

<Welcome name="Sagar" />

And receive them in the child component:

function Welcome(props) {
  return <h2>Hello, {props.name}</h2>;
}

---

Props Are Immutable

Props cannot be changed inside the component receiving them.
This ensures predictable behavior.

If you need to change data, use state instead.

---

Passing Multiple Props

<UserCard name="Amit" age={22} city="Ludhiana" />

Access in the child:

function UserCard(props) {
  return (
    <p>{props.name} is {props.age} years old from {props.city}</p>
  );
}

---

Default Props

If no value is passed, you can set defaults:

Welcome.defaultProps = {
  name: "Guest"
};

---

Destructuring Props (Best Practice)

function Welcome({ name }) {
  return <h2>Hello, {name}</h2>;
}

Cleaner and easier to read.

---

Conclusion

Props are the backbone of data sharing in React. They make components reusable, organized, and flexible.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP