React Props Direct Mutation — The Stale UI Bug

import React from 'react';

// A function component — just a plain JavaScript function.
// React knows it's a component because it starts with a capital letter
// and returns JSX.
function UserProfileCard({ username, role, avatarUrl }) {
  // Destructuring props directly in the parameter list keeps the
  // function body clean. Equivalent to: const { username, role, avatarUrl } = props;

  return (
    <div className="profile-card">
      {/* Curly braces let us drop back into JavaScript inside JSX */}
      <img
        src={avatarUrl}
        alt={`Profile photo of ${username}`} // Template literals work fine inside JSX attributes
      />
      <h2>{username}</h2>
      {/* Conditional rendering — if role exists, show it; otherwise show nothing */}
      {role && <span className="role-badge">{role}</span>}
    </div>
  );
}

// Named export — preferred over default export for most components
// because it forces consistent naming across your codebase
export { UserProfileCard };

// --- How you'd use this in a parent component ---
// import { UserProfileCard } from './UserProfileCard';
//
// function App() {
//   return (
//     <UserProfileCard
//       username="Sarah Connor"
//       role="Admin"
//       avatarUrl="https://example.com/sarah.jpg"
//     />
//   );
// }

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.

import React, { useState, useEffect } from 'react';

// BAD: duplicating props into state
function BadCounter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  // If parent changes initialCount after first render, count never updates
  return <div onClick={() => setCount(c => c + 1)}>{count}</div>;
}

// GOOD: use prop as initial value and ignore future changes (if that's the intent)
function GoodCounter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  // Only uses initialCount for initialisation. Parent's later changes ignored.
  return <div onClick={() => setCount(c => c + 1)}>{count}</div>;
}

// BETTER: if you need to sync when prop changes, use derived state via useMemo or direct computation
function SyncedDisplay({ count }) {
  // No state needed — compute display text directly from prop
  const displayText = `Current count: ${count}`;
  return <div>{displayText}</div>;
}

// Use case: a full name derived from first and last
function FullNameDisplay({ firstName, lastName }) {
  // Derived state — no useState needed
  const fullName = `${firstName} ${lastName}`.trim();
  return <p>{fullName}</p>;
}