JSX & Components

Props

Props pass data into a component, like arguments to a function. They are read-only.

Syntax:

function CourseCard({ title, price, level = "Beginner" }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{level}</p>
      <p>{price === 0 ? "Free" : `Rs ${price}`}</p>
    </div>
  );
}

<CourseCard title="Python from Zero" price={0} />
<CourseCard title="React & Next.js" price={2999} level="Intermediate" />

children

function Box({ children }) {
  return <div className="box">{children}</div>;
}

<Box><p>Anything inside goes into children.</p></Box>