In React, components are the building blocks of the UI. However, a component that always renders the exact same content isn't very helpful for building complex, data-driven applications. To make components reusable and dynamic, React uses Props (short for properties).

Passing Data to Components

Think of props as the arguments you pass to a JavaScript function. Just as an HTML <img> tag uses a src attribute to know which image to show, a React component uses props to receive data from its parent.

The Reusability Problem

Without props, a ProductCard component would be hardcoded:

function ProductCard() {
return <div>Featured Item: Gaming Mouse</div>;
}
function StoreFront() {
return (
<section>
<ProductCard />
<ProductCard />
</section>
);
}

In the example above, every ProductCard displays "Gaming Mouse." By using props, we can tell each card exactly what it should display.

Using Props in Practice

Data in React flows in one direction: from the parent down to the child. This is known as one-way data flow. To pass a prop, you assign it like an attribute in the JSX markup.

function StoreFront() {
return (
<div>
<ProductCard itemName="Mechanical Keyboard" />
<ProductCard itemName="Ultrawide Monitor" />
</div>
);
}

Accessing Props via Destructuring

The child component receives these properties as a single object. While you can access them via props.itemName, most developers use object destructuring to keep the code clean:

function ProductCard({ itemName }) {
return <h2>{itemName}</h2>;
}

Entering "JavaScript Land" with Curly Braces

When writing JSX, you are essentially writing a syntax that looks like HTML. To use actual JavaScript logic or variables inside that markup, you must wrap them in curly braces {}. This is your "passport" into JavaScript land.

Inside these braces, you can perform logic, such as template literals or ternary operators:

function ProductCard({ itemName, price, discount }) {
return (
<div>
<h2>{itemName.toUpperCase()}</h2>
<p>Price: ${price}</p>
<p>{discount ? On Sale: ${discount}% Off! : "Full Price"}</p>
</div>
);
}

Rendering Lists Efficiently

In many cases, your data comes in the form of an array (perhaps from an API). To transform that array into a list of UI elements, React developers use the .map() method.

The Importance of Keys

When rendering a list, React requires a key prop for each item. This unique identifier allows React to track which items have changed, been added, or removed, which optimizes performance.

function InventoryList() {
const items = [
{ id: 101, name: 'Webcam', stock: 12 },
{ id: 102, name: 'Microphone', stock: 5 },
{ id: 103, name: 'Desk Lamp', stock: 0 }
];
return (
<ul>
{items.map((item) => (
<li key={item.id}>
{item.name} — {item.stock > 0 ? ${item.stock} in stock : "Out of stock"}
</li>
))}
</ul>
);
}

Note: While you can use an array index as a key, it is best practice to use a unique ID from your data to ensure the UI updates correctly when the list is reordered.

By combining props, JSX expressions, and list mapping, you can build dynamic interfaces that adapt to any data source provided to them.