Props

Theory

Props (short for properties) are the mechanism React provides for passing data from a parent component to a child component. They are read-only and allow components to be dynamic and reusable.

What are Props?

Props are like function arguments — they are inputs that a component receives. When a parent component renders a child, it can pass props as attributes:

<Greeting name="Alice" age={25} />

Inside the child component, props are accessible as an object:

function Greeting(props) {
  return <h1>Hello, {props.name}! You are {props.age}.</h1>
}

Props can be strings, numbers, booleans, objects, arrays, functions, or even React elements.

Passing Props to Components

You pass props just like HTML attributes. Use quotes for string literals and curly braces for JavaScript expressions:

<UserCard
  name="John Doe"
  age={30}
  isAdmin={true}
  hobbies={["reading", "coding"]}
  address={{ city: "NYC", zip: "10001" }}
/>

Accessing Props

Inside a functional component, props is the first parameter:

function UserCard(props) {
  console.log(props.name)
  console.log(props.age)
  return <div>{props.name}</div>
}

Destructuring Props

Instead of writing props.name repeatedly, you can destructure props directly in the function parameter:

function UserCard({ name, age, isAdmin }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      {isAdmin && <span>Admin User</span>}
    </div>
  )
}

Destructuring makes the code cleaner and shows exactly which props a component expects.

Default Props

You can assign default values to props using destructuring defaults:

function Button({ text = "Click Me", color = "blue" }) {
  return <button style={{ backgroundColor: color }}>{text}</button>
}

If the parent doesn't pass a prop, the default value is used instead.

The Children Prop

children is a special prop that represents whatever is placed between the opening and closing tags of a component:

function Card({ children }) {
  return <div className="card">{children}</div>
}
 
// Usage:
<Card>
  <h2>Card Title</h2>
  <p>This content is passed as children</p>
</Card>

This is extremely useful for creating wrapper or layout components.

Prop Types (Brief Overview)

For type-checking props, you can use the prop-types library:

import PropTypes from 'prop-types'
 
function UserCard({ name, age }) {
  return <div>{name} is {age} years old</div>
}
 
UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
}

In modern React, TypeScript is preferred over PropTypes for type safety.

Immutable Nature of Props

Props are read-only. A component must never modify its own props. If you need to change data, that data should live in state (covered in the next lesson), not props.

// WRONG - never modify props
function BadComponent(props) {
  props.name = "New Name" // Mutation!
  return <div>{props.name}</div>
}
 
// RIGHT - props are read-only
function GoodComponent({ name }) {
  return <div>{name}</div>
}

This rule exists because React relies on props being immutable to efficiently detect changes and re-render components.

Spreading Props

You can use the JavaScript spread operator (...) to pass all properties of an object as individual props:

const user = { name: "Alice", age: 25, email: "alice@test.com" }
 
// Instead of:
<UserCard name={user.name} age={user.age} email={user.email} />
 
// You can do:
<UserCard {...user} />

Be careful with spreading — it passes every property, which may include unintended ones.

Practical Examples

Exercises

A profile card displaying the avatar, username with a verified badge, and follower count

Three badges: one large success badge that pulses, one error badge, and one default info badge

A styled card with title, subtitle, dynamic children content, and a footer

Mini Quiz

Mini Project