Careeroza

What are Props?

Props

Props (properties) are the inputs of a component, passed like HTML attributes. They are read-only: a child must never change its props.

Example

function Student({ name, course, score = 0 }) {
  return <li>{name} — {course} — score {score}</li>;
}

export default function App() {
  return (
    <ul>
      <Student name="Asha" course="React" score={92} />
      <Student name="Ravi" course="Node" score={85} />
      <Student name="Meena" course="SQL" />
    </ul>
  );
}

Result

  • Strings in quotes, everything else in { }: score={92}, active={true}, user={userObj}.
  • Destructure in the parameter list and give defaults: { score = 0 }.