Conditional Rendering React

Conditional rendering in React is the process of showing different parts of your user interface based on certain conditions or values. This concept can be used to display various contents to the user depending on the state of your application. It is a powerful feature that helps to create dynamic and adaptive interfaces..

रिएक्ट में conditional rendering कुछ conditions or values के आधार पर आपके उपयोगकर्ता इंटरफ़ेस के विभिन्न भागों को प्रस्तुत करने के अभ्यास को संदर्भित करता है। यह एक शक्तिशाली concept है जो आपको आपके एप्लिकेशन की स्थिति के आधार पर उपयोगकर्ता को different content प्रदर्शित करने की अनुमति देती है।

Below are some popular ways of using conditional rendering in React:

रिएक्ट में conditional rendering लागू करने के लिए यहां कुछ सामान्य पैटर्न दिए गए हैं

1. Using if Statements: It is possible to use regular JavaScript if statements within your JSX code to conditionally render components.

2. 
   

Using if Statements:
3. आप घटकों को सशर्त रूप से प्रस्तुत करने के लिए अपने JSX के भीतर regular JavaScript if statements का उपयोग कर सकते हैं ।

   jsx
   function ConditionalComponent({ isLoggedIn }) {
     if (isLoggedIn) {
       return <p>Welcome, User!</p>;
     } else {
       return <p>Please log in.</p>;
     }
   }
   

4. Using the Ternary Operator: The ternary operator is a concise way to perform conditional rendering in a single-line

5. .

Ternary Operator का उपयोग करना:
6. टर्नरी ऑपरेटर एक पंक्ति में सशर्त प्रतिपादन करने का एक संक्षिप्त तरीका है।

   jsx
   function ConditionalComponent({ isLoggedIn }) {
     return isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>;
   }
   

7. Using Logical && Operator: 

8. You can use the && operator to conditionally render a component based on a truthy value.

9. 
   
Logical && Operator का उपयोग करना:
10. आप truthy value के आधार पर किसी component को conditionally render करने के लिए लॉजिकल && ऑपरेटर का उपयोग कर सकते हैं ।

    jsx
    function ConditionalComponent({ isLoggedIn }) {
      return isLoggedIn && <p>Welcome, User!</p>;
    }
    

11. Conditional Rendering with null:

12. If a component's render method returns null, then it means that the component will not render anything on the screen.

13. 
    
Conditional Rendering के साथ null:
14. null किसी घटक की रेंडर विधि से लौटने पर प्रभावी रूप से कुछ भी return नहीं करता है।

    jsx
    function ConditionalComponent({ showContent }) {
      return showContent ? <p>Content is shown.</p> : null;
    }
    

15. Using switch Statements:

16. If you need to check multiple conditions, a switch statement can improve readability.


switch Statements का उपयोग करना :
17. यदि आपके पास जांचने के लिए कई शर्तें हैं, तो आप readability के लिए एक switch statement का उपयोग कर सकते हैं।

18. jsx
    function GradeComponent({ grade }) {
      switch (grade) {
        case 'A':
          return <p>Excellent!</p>;
        case 'B':
          return <p>Good job!</p>;
        default:
          return <p>Keep working hard!</p>;
      }
    }
    

Please keep in mind that you can use any JavaScript expression as a condition for conditional rendering in React. This means that you can check state values, props, or the results of functions to create dynamic and responsive user interfaces. Conditional rendering is a fundamental technique that is widely used in React.

याद रखें कि आप किसी भी JavaScript expression का उपयोग conditional rendering के लिए एक condition के रूप में कर सकते हैं। इसमें state values, props, या functions के परिणामों की जाँच करना शामिल हो सकता है। conditional rendering रिएक्ट में एक fundamental तकनीक है जो आपको dynamic और responsive उपयोगकर्ता इंटरफ़ेस बनाने में सक्षम बनाती है।