Props — Passing Data Down

// Parent passes props as attributes
function App() {
  return (
    <div>
      <Greeting name="Nelson" role="engineer" />
      <Greeting name="Alice" role="designer" />
    </div>
  );
}

// Child receives them as a single 'props' object
function Greeting(props) {
  return <p>Hello, {props.name} — {props.role}</p>;
}

// More common: destructure directly
function Greeting({ name, role }) {
  return <p>Hello, {name} — {role}</p>;
}

// Default props via default values in destructuring
function Greeting({ name = "Stranger", role = "Developer" }) {
  return <p>Hello, {name} — {role}</p>;
}

function CourseCard({ title, chapters, isLive, tags, onEnrol }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{chapters} chapters</p>
      {isLive && <span>Live</span>}
      <ul>
        {tags.map(tag => <li key={tag}>{tag}</li>)}
      </ul>
      <button onClick={onEnrol}>Enrol</button>
    </div>
  );
}

// Using it:
<CourseCard
  title="JavaScript Basics"
  chapters={14}
  isLive={true}
  tags={["JavaScript", "DOM", "ES6"]}
  onEnrol={() => console.log("Enrolled!")}
/>

// children is a special prop — the content between component tags
function Card({ children, className = "" }) {
  return (
    <div className={`card ${className}`}>
      {children}
    </div>
  );
}

// Any JSX between the opening and closing tags becomes children
function App() {
  return (
    <Card className="featured">
      <h2>JavaScript Basics</h2>
      <p>14 chapters of practical JavaScript</p>
      <button>Start Learning</button>
    </Card>
  );
}