Part 5: Props & Data Flow: Unidirectional Architecture

Props (short for properties) are how data moves in a React application. They allow a parent component to pass data, callbacks, and configuration down to child components.

1. Unidirectional Data Flow

React utilizes a one-way (unidirectional) data flow: - Data flows strictly from parent to child. - A child component receives data via props and cannot directly mutate the props it receives. - If a child needs to communicate a change back to the parent, the parent passes a callback function as a prop.

2. Passing and Receiving Props

Parent Component (App.jsx):

import ProductCard from './components/ProductCard';

export default function App() {
  return (
    <main className="container">
      <ProductCard 
        title="Mechanical Keyboard" 
        price={129.99} 
        inStock={true} 
        tags={['Peripherals', 'Hardware']}
      />
    </main>
  );
}

Child Component (ProductCard.jsx):

export default function ProductCard({ title, price, inStock, tags = [] }) {
  return (
    <div className="product-card">
      <h3>{title}</h3>
      <p className="price">${price.toFixed(2)}</p>
      <span className={inStock ? "badge-success" : "badge-danger"}>
        {inStock ? "In Stock" : "Out of Stock"}
      </span>
      <ul>
        {tags.map((tag, idx) => (
          <li key={idx}>{tag}</li>
        ))}
      </ul>
    </div>
  );
}

3. The Special children Prop

React provides a built-in prop called children representing nested content:

export default function Card({ title, children }) {
  return (
    <div className="card-wrapper border p-4 rounded-lg shadow-sm">
      {title && <h3 className="card-header font-bold mb-2">{title}</h3>}
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

Key Takeaways

• Props pass data top-down from parent to child.
• Props are strictly read-only and must never be mutated directly.
• Use props.children to build flexible, composable container components.

In Part 6, we will introduce component-level memory using the foundational useState Hook!