Understanding Props: Passing Data to Components

// Method 1: Destructuring in function parameters (recommended)
function Greeting({ name, age }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

// Method 2: Using props object
function Greeting(props) {
  return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}

// Method 3: Destructuring inside function body
function Greeting(props) {
  const { name, age } = props;
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

// Using components with props
function App() {
  return (
    <div>
      <Greeting name="Alice" age={25} />
      <Greeting name="Bob" age={30} />
      <Greeting name="Charlie" age={35} />
    </div>
  );
}

Props are passed as attributes. Notice how `age` uses curly braces for numbers (not quotes). The destructuring syntax is cleaner and more commonly used. Props are read-only - components shouldn't modify them.

function Profile({ 
  name,           // String
  age,            // Number
  isActive,       // Boolean
  user,           // Object
  tags,           // Array
  onClick,        // Function
  children        // React elements
}) {
  return (
    <div>
      <h1>{name} ({age})</h1>
      {isActive && <p>Active user</p>}
      <p>Email: {user.email}</p>
      <ul>
        {tags.map(tag => <li key={tag}>{tag}</li>)}
      </ul>
      <button onClick={onClick}>Click me</button>
      {children}
    </div>
  );
}

// Using the component with different prop types
function App() {
  const user = { email: "alice@example.com" };
  const handleClick = () => alert("Clicked!");
  
  return (
    <Profile
      name="Alice"
      age={25}
      isActive={true}
      user={user}
      tags={["developer", "designer"]}
      onClick={handleClick}
    >
      <p>This is children content</p>
    </Profile>
  );
}

You can pass any JavaScript value as props. Objects and arrays need curly braces. Functions are commonly passed for event handling. The special 'children' prop contains content between component tags.

// Method 1: Default parameters (recommended)
function Button({ 
  text = "Click me", 
  color = "blue",
  size = "medium" 
}) {
  return (
    <button className={`btn btn-${color} btn-${size}`}>
      {text}
    </button>
  );
}

// Method 2: Default props (older way, still works)
function Button({ text, color, size }) {
  return (
    <button className={`btn btn-${color} btn-${size}`}>
      {text}
    </button>
  );
}

Button.defaultProps = {
  text: "Click me",
  color: "blue",
  size: "medium"
};

// Using with and without props
function App() {
  return (
    <div>
      <Button /> {/* Uses all defaults */}
      <Button text="Submit" /> {/* Uses defaults for color and size */}
      <Button text="Delete" color="red" size="large" />
    </div>
  );
}

Default parameters are the modern way to set default props. They make components more flexible - if a prop isn't provided, the default is used. This prevents undefined errors.

// With TypeScript
interface ButtonProps {
  text: string;
  color?: "blue" | "red" | "green";  // Optional with specific values
  size?: "small" | "medium" | "large";
  onClick: () => void;
  disabled?: boolean;
}

function Button({ 
  text, 
  color = "blue",
  size = "medium",
  onClick,
  disabled = false
}: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${color} btn-${size}`}
    >
      {text}
    </button>
  );
}

// TypeScript will error if you pass wrong types
<Button 
  text="Click" 
  color="purple"  // ❌ Error: "purple" not in allowed values
  onClick={() => {}}
/>

TypeScript interfaces define what props a component expects. Optional props use '?'. This catches errors during development, not in production. TypeScript helps prevent many prop-related bugs.

// ❌ WRONG - Trying to modify props
function BadComponent({ count }) {
  count = count + 1;  // Error! Props are read-only
  return <p>{count}</p>;
}

// ✅ CORRECT - Use state if you need to modify
function GoodComponent({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// ❌ WRONG - Creating new object on every render
function BadApp() {
  return <Profile user={{ name: "Alice" }} />;  // New object each render
}

// ✅ CORRECT - Define outside or use useMemo
const user = { name: "Alice" };
function GoodApp() {
  return <Profile user={user} />;
}

// ❌ WRONG - Missing key in list
function BadList({ items }) {
  return items.map(item => <Item data={item} />);  // Missing key
}

// ✅ CORRECT - Provide unique key
function GoodList({ items }) {
  return items.map(item => (
    <Item key={item.id} data={item} />
  ));
}

Remember: props are immutable. If you need to modify data, use state. Always provide keys for list items. Avoid creating new objects/arrays in render (causes unnecessary re-renders).