Props in React

Props (short for properties) are the way data is passed from one component to another in React. They allow components to be dynamic — the same component can display different content depending on what props it receives.

Props work similar to function arguments. When a function is called with specific arguments, it processes those values. When a component is used with specific props, it displays content based on those values.

Why Are Props Needed?

In the previous topic, a Button component was created that always displayed the same text: "Click Me". But what if multiple buttons are needed with different labels — "Submit", "Cancel", "Delete"? Writing a separate component for each button would be impractical.

Props solve this by allowing the same component to accept different values each time it is used.

Passing Props to a Component

Props are passed to a component in the same way attributes are added to an HTML element:

function App() {
  return (
    <div>
      <Button label="Submit" />
      <Button label="Cancel" />
      <Button label="Delete" />
    </div>
  );
}

Here, label is the prop being passed. Each instance of Button receives a different label value.

Receiving Props in a Component

Inside the component function, props are received as a single parameter — conventionally named props. Each prop is accessed as a property of this object:

function Button(props) {
  return <button>{props.label}</button>;
}

Now the button displays whatever text is passed through the label prop. Calling <Button label="Submit" /> renders a button that says "Submit".

Destructuring Props

A cleaner and more common approach is to destructure the props directly in the function parameter. This avoids writing props.label repeatedly:

function Button({ label }) {
  return <button>{label}</button>;
}

The result is identical, but the code is shorter and easier to read. This is the preferred style in modern React development.

Passing Multiple Props

Multiple props can be passed to a single component:

function UserProfile({ name, age, city }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserProfile name="Alice" age={30} city="London" />
      <UserProfile name="Bob" age={25} city="New York" />
    </div>
  );
}

Note that string values are passed using quotes (name="Alice"), while numbers and JavaScript expressions are passed using curly braces (age={30}).

Props Are Read-Only

A very important rule in React: props cannot be modified inside the component that receives them. Props flow in one direction — from parent to child — and the child component should never change the prop values it receives.

Think of props like a letter someone sends. The recipient can read the letter, but cannot change what was written in it. If the data needs to change, that is handled using State, which is covered in the next topic.

Default Props

A default value can be set for a prop in case it is not provided by the parent component. This prevents the component from breaking when a prop is missing:

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="Alice" />  {/* Displays: Hello, Alice! */}
      <Greeting />               {/* Displays: Hello, Guest! */}
    </div>
  );
}

When no name prop is passed, the default value "Guest" is used automatically.

Passing Functions as Props

Props are not limited to strings and numbers. Functions can also be passed as props. This is commonly used to communicate from a child component back to a parent — for example, when a button is clicked:

function AlertButton({ message, onClick }) {
  return <button onClick={onClick}>Show Alert</button>;
}

function App() {
  function handleClick() {
    alert("Button was clicked!");
  }

  return <AlertButton onClick={handleClick} />;
}

The handleClick function is defined in the parent (App) and passed down as a prop to the child (AlertButton). When the button is clicked, the parent's function runs.

The children Prop

React has a special built-in prop called children. It captures any content placed between a component's opening and closing tags:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h3>Card Title</h3>
      <p>This content is passed as the children prop.</p>
    </Card>
  );
}

The Card component wraps whatever is placed inside it, making it a flexible container component.

Key Points

• Props allow data to be passed from a parent component to a child component.
• Props are received as a single object parameter in the component function.
• Destructuring props in the function signature is the preferred modern approach.
• Props are read-only — the receiving component must not modify them.
• Default values for props can be defined directly in the function parameters.
• Functions can be passed as props to allow child-to-parent communication.
• The special children prop captures content placed between component tags.

The next topic introduces State — the mechanism that allows components to store and update their own data, making the user interface interactive and dynamic.