What are React Props and How Do They Work

React props (short for “properties”) are a fundamental concept in React used to pass data from one component to another. This article provides a clear, straightforward explanation of what React props are, how they work, how to pass and receive them, and the essential rules governing their use in modern web development.

What are React Props?

In React, components are the building blocks of the user interface. To make these components dynamic and reusable, they need a way to receive data. Props are the mechanism used to pass data from a parent component down to a child component.

Think of props as arguments passed into a JavaScript function. Just as you pass arguments to a function to change its output, you pass props to a React component to customize its rendering and behavior.

How to Pass and Receive Props

Props are passed to components using a syntax similar to HTML attributes. Once passed, they can be accessed inside the receiving component.

1. Passing Props from a Parent Component

To pass a prop, define an attribute on the component element inside the parent component.

function App() {
  return (
    <div>
      <UserCard name="Alex" age={28} />
    </div>
  );
}

In this example, the App component is passing two props, name and age, to the child component UserCard.

2. Receiving Props in a Child Component

The child component receives these props as a single object argument. You can access the properties directly from this object.

function UserCard(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

3. Using Destructuring for Cleaner Code

A common and cleaner way to access props is by destructuring the props object directly in the function’s parameter list.

function UserCard({ name, age }) {
  return (
    <div>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

Key Characteristics of React Props

To use props effectively, you must understand their core rules and behavior:

• Read-Only (Immutable): Components must never modify their own props. Props are strictly read-only. If a component needs to change data over time, it should use React “state” instead of props.
• Unidirectional Data Flow: Data in React flows one way—from parent to child. Parents pass props down, but children cannot directly pass props back up to their parents.
• Versatile Data Types: You can pass any JavaScript data type as a prop, including strings, numbers, booleans, arrays, objects, and even functions.

Passing Functions as Props

Because you can pass functions as props, child components can communicate with parent components. By triggering a function passed down from a parent, a child component can send data or update state in the parent.

// Parent Component
function Parent() {
  const handleAlert = (message) => {
    alert(message);
  };

  return <ChildButton triggerAlert={handleAlert} />;
}

// Child Component
function ChildButton({ triggerAlert }) {
  return (
    <button onClick={() => triggerAlert("Hello from Child!")}>
      Click Me
    </button>
  );
}

By mastering props, you can create highly reusable, dynamic, and modular components that form the foundation of any robust React application.