Props In React Components

In React, props (short for properties) are a way to pass data from a parent component to a child component. They are essentially a mechanism for communication between components. Props are read-only and cannot be modified by the child component that receives them. Instead, the parent component that owns and creates the child component can update the props.

Here's how you use props in React components:

रिएक्ट में, props (गुणों के लिए संक्षिप्त) parent component से child component तक डेटा पास करने का एक तरीका है। वे मूलतः components के बीच संचार के लिए एक तंत्र हैं। Props केवल-पढ़ने के लिए होते हैं और उन्हें प्राप्त करने वाले Child component द्वारा संशोधित नहीं किए जा सकते। इसके बजाय, parent component जो child component का स्वामी है और बनाता है, वह प्रॉप्स को अपडेट कर सकता है।

यहां बताया गया है कि आप React components में Props का उपयोग कैसे करते हैं:

Passing Props from Parent to Child:

In the parent component, you pass the data you want to share to the child component by adding attributes to the child component's JSX.

Parent से Child तक Props पास करना:

मूल घटक में, आप Child component के JSX में विशेषताएँ जोड़कर वह डेटा पास करते हैं जिसे आप hild component में साझा करना चाहते हैं

ParentComponent.js:

jsx

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const message = "Hello from parent!";
  
  return <ChildComponent message={message} />;
};

export default ParentComponent;

Receiving Props in Child Component:

In the child component, you can access the props by referencing them as properties of the props object.

Child Component में Props प्राप्त करना:

child component में, आप Props को propsऑब्जेक्ट के गुणों के रूप में संदर्भित करके उन तक पहुंच सकते हैं।

ChildComponent.js:

jsx

import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.message}</div>;
};

export default ChildComponent;

In this example, the message prop passed from the ParentComponent is accessed using the props.message in the ChildComponent.

इस उदाहरण में, messageसे पारित प्रोप को इन का ParentComponentउपयोग करके एक्सेस किया जाता है ।props.messageChildComponent

Default Props:

You can also specify default values for props in case they are not provided by the parent component. This is done using the defaultProps property.

Default Props:

यदि आप parent component द्वारा प्रदान नहीं किए गए हैं तो आप प्रॉप्स के लिए default values भी निर्दिष्ट कर सकते हैं। यह defaultProps property का उपयोग करके किया जाता है।

ChildComponent.js:

jsx

import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.message || "Default Message"}</div>;
};

ChildComponent.defaultProps = {
  message: "Default Message"
};

export default ChildComponent;

Destructuring Props:

Instead of accessing props through the props object, you can also destructure the props directly in the function parameter.

Destructuring Props:

ऑब्जेक्ट के माध्यम से props तक पहुंचने के बजाय आप प्रॉप्स को सीधे फ़ंक्शन पैरामीटर में भी नष्ट कर सकते हैं।

ChildComponent.js:

jsx

import React from 'react';

const ChildComponent = ({ message }) =>                                 {
  return <div>{message}</div>;
};
                            
export default ChildComponent;

Remember that props are unidirectional. They flow from parent to child, and if you want to pass data back from a child to its parent, you would typically use callback functions passed as props.

याद रखें कि प्रॉप्स यूनिडायरेक्शनल हैं। वे parent से Child तक प्रवाहित होते हैं, और यदि आप किसी child से डेटा को उसके Parents तक वापस भेजना चाहते हैं, तो आप आम तौर पर Props के रूप में पारित कॉलबैक फ़ंक्शन का उपयोग करेंगे।

jsx

// ParentComponent.js

const ParentComponent = () => {
  const handleChildClick = (messageFromChild) => {
    console.log(`Message from child: ${messageFromChild}`);
  };
  
  return <ChildComponent onChildClick={handleChildClick} />;
};

jsx

// ChildComponent.js

const ChildComponent = ({ onChildClick }) => {
  const handleClick = () => {
    onChildClick("Hello from child!");
  };
  
  return <button onClick={handleClick}>Click Me</button>;
};

In this example, when the button in the ChildComponent is clicked, it triggers the handleChildClick function passed from the ParentComponent.

इस उदाहरण में, जब बटन पर ChildComponentक्लिक किया जाता है, तो यह handleChildClickसे पारित फ़ंक्शन को ट्रिगर करता है ParentComponent।

Search This Blog