Components & Props

Props (short for "properties") are how you pass data from a parent component to a child. They make components reusable — the same component can render different content based on the props it receives.

function UserCard({ name, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

// Using it with different props
function App() {
  return (
    <div>
      <UserCard name="Priya" role="Developer" />
      <UserCard name="Arjun" role="Designer" />
    </div>
  );
}

Destructuring props

It's idiomatic to destructure props in the function parameters, as shown above. The alternative is accessing props.name:

function UserCard(props) {
  return <h2>{props.name}</h2>;
}

The children prop

The special children prop contains whatever you put between a component's opening and closing tags — great for wrapper/layout components.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

Rendering lists

Use .map() to render an array of data. Each item needs a unique, stable key.

function SkillList({ skills }) {
  return (
    <ul>
      {skills.map((skill) => (
        <li key={skill.id}>{skill.name}</li>
      ))}
    </ul>
  );
}