Feed Reader BotФотография
DEV Community: react
React Mastery Series – Day 6: Props in React – Passing Data Between Components
Welcome back to the React Mastery Series!
So far, we've learned:
* What React is
* Why React was created
* Setting up a React project
* Understanding JSX
* Building reusable components
In the previous article, we learned that components are the building blocks of every React application.
However, a component that always displays the same content isn't very useful.
Imagine an e-commerce website displaying hundreds of products. Creating a separate component for every product would result in repetitive code that's difficult to maintain.
Instead, React provides Props, allowing us to reuse the same component with different data. What are Props? Props (short for Properties) are read-only values passed from a parent component to a child component.
Think of props as function arguments.
Just as a function behaves differently depending on the arguments passed to it, a React component can render different content based on the props it receives.
Example: function Welcome(props) { return h1>Hello, {props.name}!h1>; } function App() { return ( Welcome name="Siva" /> Welcome name="John" /> Welcome name="Emma" /> ); } Output: Hello, Siva!
Hello, John!
Hello, Emma! The same component is reused three times with different data. How Props Work Props create a one-way data flow. Parent Component
│
│ Props
▼
Child Component The parent sends data.
The child receives data.
The child cannot modify the props it receives.
This predictable data flow is one of React's greatest strengths. Why Do We Need Props? Imagine building an online shopping application.
Without props: ProductCard /> ProductCard /> ProductCard /> ProductCard /> Each component would display identical information.
With props: ProductCard name="Wireless Mouse" price={799} /> ProductCard name="Mechanical Keyboard" price={3499} /> ProductCard name="Monitor" price={12999} /> Now one reusable component can display unlimited products. Passing Different Types of Props Props can hold almost any JavaScript value. String User name="Siva" /> Number Product price={4999} /> Boolean Button disabled={true} /> Array Skills skills={["React", "TypeScript", "Node.js"]} /> Object User user={{ name: "Siva", city: "Dubai" }} /> Function Functions are frequently passed as props to allow child components to communicate with their parent. Button onClick={handleSave} /> We'll explore this in more detail when discussing event handling. Destructuring Props Instead of repeatedly writing props.name, React developers often destructure props.
Instead of: function User(props) { return h2>{props.name}h2>; } Use: function User({ name }) { return h2>{name}h2>; } This approach is shorter and easier to read. Props are Read-Only One of the most important React rules is: Never modify props inside a child component.
❌ Incorrect: function User({ name }) { name = "Admin"; return h2>{name}h2>; } React expects props to remain immutable.
If data needs to change, the parent component should update it and pass the new value down. Passing Multiple Props Components often require more than one piece of information.
Example: ProductCard name="Laptop" brand="Dell" price={74999} rating={4.8} /> Child component: function ProductCard({ name, brand, price, rating }) { return ( h2>{name}h2> p>{brand}p> p>₹{price}p> p>{rating} ⭐p> ); } The children Prop One of the most powerful features in React [...]