React Props: How to Pass Data Between Components

One of the most useful features of React is the ability to build reusable components. But how can one component share information with another? The answer is props.

Props, short for properties, allow a parent component to pass data to a child component. They work much like function arguments and help make React applications more flexible and organized.

What Are Props in React?

Props are read-only values passed from a parent component to a child component. They can contain different types of data, including strings, numbers, arrays, objects, and functions.

For example, a parent component can pass a user's name to a child component, which then displays it.

A Simple Example

function Welcome(props) {
  return <h2>Welcome, {props.name}!</h2>;
}

function App() {
  return (
    <div>
      <Welcome name="Rachit" />
      <Welcome name="Alex" />
    </div>
  );
}

export default App;

In this example, the App component passes the name prop to the Welcome component. The child component receives the value through props.name.

Output:

Welcome, Rachit!
Welcome, Alex!

The same component can now display different content without changing its internal code.

Destructuring Props

Instead of writing props.name, you can use destructuring to make the component cleaner:

function Welcome({ name }) {
  return <h2>Welcome, {name}!</h2>;
}

This is a common approach in modern React functional components.

Props Are Read-Only

A child component should not directly modify the props it receives. Props are intended to provide data from the parent to the child.

If the data needs to change, the parent can update its state and pass the new value through props.

Why Are Props Important?

Props help developers:

• Pass data between components.

• Create reusable UI elements.

• Display dynamic content.

• Keep components organized.

• Share event handlers between components.

For example, a reusable Button component can receive different labels and click handlers through props.

Conclusion

React props provide a simple way for components to communicate and share data. By passing values from parent to child, developers can create reusable, dynamic, and maintainable interfaces.

Once you understand props, concepts such as state, event handling, and component composition become much easier to learn.

If you're learning React, practicing props with small reusable components is a great place to start.