React Props

What is Props in React?

Props are the read-only inputs a parent passes down to a child component. They arrive as a single object and are the primary way data flows through a React app — always downward, from parent to child.

Why Props matters

Props are what make components reusable. One Card component with different props renders a job card, a course card and a company card, instead of three near-identical components.

Props example

function JobCard({ title, company, stipend, remote = false }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{company} · ₹{stipend}/month</p>
      {remote && <span className="tag">Work from home</span>}
    </div>
  );
}

<JobCard title="Frontend Intern" company="Zoho" stipend={15000} remote />

How this works

Strings are passed in quotes; anything else — numbers, booleans, arrays, objects, functions — goes in braces. Writing remote on its own is shorthand for remote={true}. The default value in the destructuring applies when the prop is omitted.

Key points to remember

• Props are immutable inside the child — never assign to props.something.
• Destructure in the parameter list for readable code.
• Pass functions down as props to let a child talk back to its parent.
• Spread an object of props with {...obj} when forwarding many at once.

Common mistakes with Props

• Mutating a prop instead of asking the parent to change its state.
• Passing stipend="15000" as a string and then doing arithmetic on it.
• Spreading unknown props onto a DOM element, producing React warnings about invalid attributes.