React Components and Props Explained — Patterns, Pitfalls and Real-World Usage

import React, { useState } from 'react';

// CHILD COMPONENT
// This component has no idea where quantity comes from or how
// onQuantityChange works — it just calls the function when needed.
// This is deliberate. It makes QuantitySelector reusable anywhere.
function QuantitySelector({ quantity, onQuantityChange, maxQuantity }) {
  return (
    <div className="quantity-selector">
      <button
        onClick={() => onQuantityChange(quantity - 1)} // Calls parent's handler — doesn't touch state directly
        disabled={quantity <= 1} // Props drive the UI state — no internal guessing
      >
        −
      </button>

      <span>{quantity}</span>

      <button
        onClick={() => onQuantityChange(quantity + 1)}
        disabled={quantity >= maxQuantity} // Parent dictates the ceiling via props
      >
        +
      </button>
    </div>
  );
}

// PARENT COMPONENT
// The parent owns the state. It passes data down as props,
// and a handler function the child can call to request a change.
function ProductPage() {
  const [selectedQuantity, setSelectedQuantity] = useState(1);

  // The parent decides what happens when quantity changes.
  // QuantitySelector doesn't need to know about this logic at all.
  function handleQuantityChange(newQuantity) {
    if (newQuantity >= 1 && newQuantity <= 10) {
      setSelectedQuantity(newQuantity);
    }
  }

  return (
    <div>
      <h1>Wireless Headphones</h1>
      <QuantitySelector
        quantity={selectedQuantity}        // Data flows DOWN as a prop
        onQuantityChange={handleQuantityChange} // Function flows DOWN so events can go UP
        maxQuantity={10}
      />
      <p>Total units selected: {selectedQuantity}</p>
    </div>
  );
}

export { ProductPage };

import React from 'react';
import PropTypes from 'prop-types'; // npm install prop-types

// Mapping type strings to visual styles keeps the component
// flexible without requiring the parent to pass colour hex codes.
const BANNER_STYLES = {
  success: { backgroundColor: '#d4edda', borderColor: '#28a745', icon: '✓' },
  warning: { backgroundColor: '#fff3cd', borderColor: '#ffc107', icon: '⚠' },
  error:   { backgroundColor: '#f8d7da', borderColor: '#dc3545', icon: '✕' },
  info:    { backgroundColor: '#d1ecf1', borderColor: '#17a2b8', icon: 'ℹ' },
};

function NotificationBanner({
  message,
  type = 'info',       // Default value — if 'type' isn't passed, component stays functional
  isDismissible = true, // Defaults to true so most banners get a close button for free
  onDismiss,
}) {
  // Safely fall back to 'info' style if an unrecognised type is passed
  const bannerStyle = BANNER_STYLES[type] ?? BANNER_STYLES.info;

  return (
    <div
      style={{
        padding: '12px 16px',
        border: `1px solid ${bannerStyle.borderColor}`,
        backgroundColor: bannerStyle.backgroundColor,
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
      }}
    >
      <span>{bannerStyle.icon}</span>
      <span style={{ flex: 1 }}>{message}</span>

      {/* Only render the dismiss button if both flags allow it */}
      {isDismissible && onDismiss && (
        <button onClick={onDismiss} aria-label="Dismiss notification">
          ×
        </button>
      )}
    </div>
  );
}

// PropTypes act as living documentation — any dev using this component
// can see exactly what it expects without reading the full source.
NotificationBanner.propTypes = {
  message: PropTypes.string.isRequired, // This one is mandatory — you must pass it
  type: PropTypes.oneOf(['success', 'warning', 'error', 'info']), // Constrained set of values
  isDismissible: PropTypes.bool,
  onDismiss: PropTypes.func, // Optional — only needed when isDismissible is true
};

export { NotificationBanner };

// --- Usage examples ---
// <NotificationBanner message="File saved successfully." type="success" />
// <NotificationBanner message="Session expiring in 5 minutes." type="warning" isDismissible={false} />
// <NotificationBanner
//   message="Payment failed. Please try again."
//   type="error"
//   onDismiss={() => setShowBanner(false)}
// />

import React from 'react';

// A 'guard' component that controls what the user can see
// based on their permissions. It knows nothing about the UI
// it's protecting — that's intentional.
function PermissionGuard({ requiredRole, currentUserRole, children, fallback }) {
  const ROLE_HIERARCHY = { viewer: 1, editor: 2, admin: 3 };

  const userLevel = ROLE_HIERARCHY[currentUserRole] ?? 0;
  const requiredLevel = ROLE_HIERARCHY[requiredRole] ?? Infinity;

  // If the user has sufficient permissions, render whatever was nested inside
  if (userLevel >= requiredLevel) {
    return <>{children}</>; // The <></> is a React Fragment — a wrapper with no DOM output
  }

  // Otherwise render the fallback, or nothing if none was provided
  return fallback ?? null;
}

// A simple Card wrapper — pure composition, pure layout concern
function DashboardCard({ title, children }) {
  return (
    <div className="dashboard-card" style={{ border: '1px solid #e0e0e0', borderRadius: '8px', padding: '20px', margin: '12px 0' }}>
      <h3 style={{ marginTop: 0 }}>{title}</h3>
      {/* children renders whatever the parent put between <DashboardCard> tags */}
      {children}
    </div>
  );
}

// --- How these compose together in a real dashboard ---
function AdminDashboard({ loggedInUser }) {
  return (
    <div>
      <DashboardCard title="Overview">
        {/* This content is 'children' of DashboardCard */}
        <p>Welcome back, {loggedInUser.name}.</p>
        <p>Last login: {loggedInUser.lastLogin}</p>
      </DashboardCard>

      <PermissionGuard
        requiredRole="admin"
        currentUserRole={loggedInUser.role}
        fallback={<p style={{ color: '#999' }}>You don't have access to user management.</p>}
      >
        {/* This entire block only renders if the user is an admin */}
        <DashboardCard title="User Management">
          <button>Invite New User</button>
          <button style={{ marginLeft: '8px' }}>Manage Roles</button>
        </DashboardCard>
      </PermissionGuard>
    </div>
  );
}

export { AdminDashboard, DashboardCard, PermissionGuard };

// loggedInUser = { name: 'Jordan', lastLogin: '2024-01-15', role: 'editor' }
// Result: Overview card renders. User Management card is REPLACED by the fallback message.
//
// loggedInUser = { name: 'Sam', lastLogin: '2024-01-14', role: 'admin' }
// Result: Both cards render. Admin sees the Invite and Manage buttons.