Components & Props

Props (short for "properties") are how data flows into a component from whoever renders it — the same way arguments flow into a function.

Passing and reading props

Any attribute you write on a component in JSX becomes a property on a single props object the component receives:

function UserCard(props) {
  return (
    <div className="card">
      <h3>{props.name}</h3>
      <p>{props.role}</p>
    </div>
  );
}

function App() {
  return (
    <>
      <UserCard name="Priya" role="Frontend Developer" />
      <UserCard name="Sam" role="Backend Developer" />
    </>
  );
}

Two cards, one reading "Priya / Frontend Developer"
and one reading "Sam / Backend Developer" — the
same UserCard component, rendered twice with
different data.

<UserCard name="Priya" role="Frontend Developer" /> creates a props object {"{ name: 'Priya', role: 'Frontend Developer' }"} and hands it to UserCard. This is the entire point of components: write the markup once, then reuse it with different data every time you render it.

Destructuring props

Writing props.name and props.role repeatedly gets tedious — most real React code destructures the props object right in the function signature:

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

Identical output to the previous example — this
is purely a more concise way to write the same thing.

Props are read-only

A component must never modify its own props. If UserCard needs to change what it displays, that change has to come from whoever renders it passing different props in — not from UserCard reassigning props.name itself.