Props

Props (short for "properties") are the mechanism by which React components communicate with each other. They are how you pass data from a parent component down to a child component.

You can think of components like JavaScript functions, and props as the arguments passed into those functions.

Passing and Accessing Props

You pass props to a component similarly to how you pass attributes to an HTML tag.

// Passing props
function App() {
  return (
    <div>
      <Welcome name="Sara" role="Admin" />
      <Welcome name="Cahal" role="User" />
    </div>
  );
}

In the child component, props are received as a single object containing all the passed properties.

// Accessing props
function Welcome(props) {
  return <h1>Hello, {props.name}. Your role is {props.role}.</h1>;
}

Props are Read-Only

A strict rule in React is that components must never modify their own props. Props are read-only.

Whether you declare a component as a function or a class, it must act like a pure function with respect to its props. If a component needs to manage data that changes over time, it should use state instead.

Destructuring Props

To make your code cleaner and more readable, it is common to destructure the props object directly in the function signature.

function Welcome({ name, role }) {
  return <h1>Hello, {name}. Your role is {role}.</h1>;
}

This immediately extracts name and role as variables, avoiding the need to type props.name repeatedly.

Default Props

You can assign default values to props in case they are not provided by the parent.

With modern functional components and destructuring, the preferred way to set default props is using standard JavaScript default parameters:

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

(Note: Historically, React used a defaultProps property on the component function, but this approach is being deprecated for functional components in favor of JS default parameters).

The children Prop

React has a special prop called children that allows components to pass elements into other components, treating them like generic "boxes".

When you nest content inside a component's tags, that content is automatically passed to the component via the children prop.

function Card({ children }) {
  return (
    <div className="card-wrapper shadow-lg rounded-md p-4">
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>This is the card body.</p>
    </Card>
  );
}

The Card component doesn't need to know what it's rendering inside. It just takes children and places it within its own markup structure. This pattern is heavily used for layouts, dialogs, modals, and generic wrappers.

Passing Functions as Props

Props aren't limited to strings or numbers; you can pass any JavaScript value, including objects, arrays, and functions.

Passing functions as props is how child components communicate back up to their parents (often called "callbacks").

function SearchBar({ onSearch }) {
  return (
    <input 
      type="text" 
      onChange={(e) => onSearch(e.target.value)} 
      placeholder="Search..."
    />
  );
}

Summary

• Props are used to pass data downwards from parent to child.
• They are read-only and must not be mutated by the receiving component.
• Destructuring makes working with props cleaner.
• The children prop allows components to compose their UI by wrapping arbitrary content.