How to send data using props in react js | How to pass React props to components

In ReactJS, props (short for properties) are used to pass data from a parent component to a child component. This concept allows components to be reusable and dynamic by feeding them different values. Props work similarly to function parameters — they are read-only and help in communication between components.

Let’s say you have a parent component called App and a child component called Greeting. You can pass the user’s name from the parent to the child using props. This enables the child to display dynamic content without managing its own state. Props are one of the core features of React and are essential for building scalable, modular applications.

In this article, we’ll walk through a basic example that demonstrates how to pass and access props in a clean, beginner-friendly way.

👉 Download Free Ebook →

👉 Get Free Course →

🧩 Example: Passing Name Prop from Parent to Child

🔷 Parent Component (App.js)

```
   import React FROM 'react';
```
```
import Greeting FROM './Greeting';
```
```
 
```
```
FUNCTION App() {
```
```
  RETURN (
```

    <div STYLE={{ fontFamily: 'Arial', padding: '20px' }}>

      <h2>👨‍💻 Welcome TO React Props Demo</h2>

      <Greeting userName="Vijay Kumar" />

```
    </div>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT App;
```

🔶 Child Component (Greeting.js)

```
   import React FROM 'react';
```
```
 
```
```
FUNCTION Greeting(props) {
```
```
  RETURN (
```

    <p>Hello, <strong>{props.userName}</strong>! Have a great DAY ahead 😊</p>

```
  );
```
```
}
```
```
 
```
```
export DEFAULT Greeting;
```

📌 Key Points:

Props are passed from parent → child as attributes (userName=”Vijay”)
Props are read-only and cannot be modified in the child
You access them using props.propertyName

FAQ (Frequently Asked Questions)

How to pass data through props in React?

To pass props, add them to the JSX, just like you would with HTML attributes. To read props, use the function Avatar({ person, size }) destructuring syntax. You can specify a default value like size = 100 , which is used for missing and undefined props.

How to pass state as props in React?

Passing state or props from one component to another in React is very simple, especially with the help of event handlers like onClick . Whether you're using class-based components or functional components with hooks, the idea remains the same: state lives in the parent, and data is passed to children via props.

What are props into other components?

Props are arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to send data using props in react js | How to pass React props to components | React – Passing Data Between Components

📌 Key Points:

How to pass data through props in React?

How to pass state as props in React?

What are props into other components?

Related Topics | You May Also Like

Vijay Kumar