In React ,props(short for properties) are the way pass data from one components to another. They're the foundations of reualble and modular UI components
What Are Props in React?
props are read only inputs to React components.They allow data to floe from parents to child components.
function Welcome({ name }) {
return
Hello, {name}!
;}
function App() {
return ;
}
Here App pass a prop name to Welcome.
Why Use Props?
Reusability -Customize one component for many use cases.
One-way Data Flow -Predictable and traceable.
Configurability โ Easily change behavior with value.
How to Pass Props ?
- Primitive Values
- Objects
- Arrays
- Functions
- Components } />
- Children (Special Prop)
This is children prop content.
Destructuring Props
Inline Destructuring
function Profile({ name, age }) {
return
{name} is {age} years old.
;}
Destructuring Inside
function Profile(props) {
const { name, age } = props;
return
{name} is {age} years old.
;}
Default Props
function Greeting({ name = "Guest" }) {
return
Hi, {name}
;}
Conclusion
Props are life lien of React components .Mastering them will make you a more effective and confident developer. From basic values to complex structures and patterns like children and functions โ props helps you build dynamic, scalable interface.
Want to dive deeper? Check out the official React docs on props.
Happy Coding! ๐
Top comments (0)