Props

Short for "properties", props are arguments passed into React components, similar to function parameters, allowing data to flow from parent to child components.

Overview

Props are how components talk to each other in React. They are read-only data passed from a parent component to a child component. Props enable you to make components reusable by allowing them to receive different data each time they are used. Props follow a one-way data flow pattern, flowing down from parent to child.

Example

javascript
// Parent component passing props
function App() {
  return (
    <div>
      <UserCard
        name="Alice"
        age={30}
        email="[email protected]"
      />
    </div>
  );
}

// Child component receiving props
function UserCard({ name, age, email }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

// Props with children
function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      {children}
    </div>
  );
}

Key Points

  • Read-only (immutable)
  • Passed from parent to child
  • Can be any data type
  • Destructuring common in function components
  • 'children' is a special prop for nested content

Learn More