Props in React

// --- App.jsx (Parent) ---
import React from 'react';
import UserCard from './UserCard';

const App = () => {
  return (
    <div className="app">
      {/* Passing string, number, and boolean props */}
      <UserCard name="Alice" age={28} isActive={true} />
    </div>
  );
};

// --- UserCard.jsx (Child) ---
const UserCard = ({ name, age, isActive }) => {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
};

export default App;

// --- App.jsx (Parent) ---
import React from 'react';
import UserProfile from './UserProfile';

const App = () => {
  const userData = { name: 'Bob', role: 'Admin' };
  const hobbyList = ['coding', 'gaming', 'reading'];

  return (
    <div className="app">
      {/* Passing objects and arrays directly */}
      <UserProfile user={userData} hobbies={hobbyList} />
    </div>
  );
};

// --- UserProfile.jsx (Child) ---
const UserProfile = ({ user, hobbies }) => {
  return (
    <div className="profile">
      <h2>{user.name} ({user.role})</h2>
      <ul>
        {hobbies.map((hobby, i) => (
          <li key={i}>{hobby}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

// --- App.jsx (Parent) ---
import React, { useState } from 'react';
import ActionButton from './ActionButton';

const App = () => {
  const [action, setAction] = useState('None');

  const handleSave = () => setAction('Saved!');
  const handleDelete = () => setAction('Deleted!');

  return (
    <div className="app">
      {/* Passing functions as props */}
      <ActionButton label="Save" onClick={handleSave} />
      <ActionButton label="Delete" onClick={handleDelete} />
      <p>Last action: {action}</p>
    </div>
  );
};

// --- ActionButton.jsx (Child) ---
const ActionButton = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default App;

// --- App.jsx (Parent) ---
import React from 'react';
import Card from './Card';

const App = () => {
  return (
    <div className="app">
      {/* Passing nested JSX as children */}
      <Card title="Welcome">
        <p>Hello, this is default content!</p>
      </Card>
      
      <Card title="Custom">
        <img src="logo.png" alt="Logo" />
        <span>Any JSX works here!</span>
      </Card>
    </div>
  );
};

// --- Card.jsx (Child) ---
const Card = ({ title, children }) => {
  return (
    <div className="card-wrapper">
      <h3>{title}</h3>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
};

export default App;

// --- App.jsx (Parent) ---
import React from 'react';
import Badge from './Badge';

const App = () => {
  return (
    <div className="app">
      {/* Uses default variant and count */}
      <Badge>Default</Badge>
      
      {/* Passes custom props and HTML attributes via rest */}
      <Badge variant="danger" count={5} id="alert-badge" title="Hover me">
        Alert
      </Badge>
    </div>
  );
};

// --- Badge.jsx (Child) ---
const Badge = ({ variant = 'primary', count = 0, children, ...rest }) => {
  return (
    <span className={`badge badge-${variant}`} {...rest}>
      {children}
      {count > 0 && <span className="count">{count}</span>}
    </span>
  );
};

export default App;