SlideShare a Scribd company logo
Conditional
Rendering
7070905090
info@ducatindia.com
Condition Rendering is used to represent output by applying conditions in code
with three different approached which is fetched while rendering of code.
Suppose we have a code with following condition-:
If user is logged in then display ‘you’re welcome’ if not logged in then
display ‘Welcome guest’
For Example we put conditions on code with three different approaches.
• First Approach-:
If-Else is first approach. Using If-Else in JSX is not valid so use it outside
JSX code as-:
• Second Approach
Elements Variable- Use JavaScript variables to store elements as-:
• Third Approach
Ternary conditional operator- Here conditional operator is used. It can
be easily used in JSX as-:
• Fourth Approach
Short Circuit Operator- This Approach is just specific case of ternary
conditional operator. You must render something or nothing using short
circuit approach.
Prevent rendering with Null
Advantage of returning “null” instead of empty element is that performance
will be improved of the app because react wont Unmount component to
replace.
• React Element Variables
If you don’t want more than one return statement so to avoid writing return
Statement again and again use a variable to store the JSX elements and only
initialize it when condition is “true”
7070905090
info@ducatindia.com

More Related Content

What's hot

Prototype pattern
Prototype patternPrototype pattern
Prototype pattern
Shakil Ahmed
 
Javascript functions
Javascript functionsJavascript functions
Javascript functions
Alaref Abushaala
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
Nimish Gupta
 
C# Async Await
C# Async AwaitC# Async Await
C# Async Await
Simplilearn
 
Meetup angular http client
Meetup angular http clientMeetup angular http client
Meetup angular http client
Gaurav Madaan
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
Bethmi Gunasekara
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
Amit Baghel
 
AngularJS for Beginners
AngularJS for BeginnersAngularJS for Beginners
AngularJS for Beginners
Edureka!
 
Modern UI Development With Node.js
Modern UI Development With Node.jsModern UI Development With Node.js
Modern UI Development With Node.js
Ryan Anklam
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
dhanushkacnd
 
Introduction to Android Fragments
Introduction to Android FragmentsIntroduction to Android Fragments
Introduction to Android Fragments
Sergi Martínez
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
Abhishek Kesharwani
 
Angular directives and pipes
Angular directives and pipesAngular directives and pipes
Angular directives and pipes
Knoldus Inc.
 
React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
Piyush Jamwal
 
Design Pattern - Factory Method Pattern
Design Pattern - Factory Method PatternDesign Pattern - Factory Method Pattern
Design Pattern - Factory Method Pattern
Mudasir Qazi
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
Manoj Kumar
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
Abul Hasan
 
Intents in Android
Intents in AndroidIntents in Android
Intents in Android
ma-polimi
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Maulik Shah
 
Js scope
Js scopeJs scope

What's hot (20)

Prototype pattern
Prototype patternPrototype pattern
Prototype pattern
 
Javascript functions
Javascript functionsJavascript functions
Javascript functions
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
C# Async Await
C# Async AwaitC# Async Await
C# Async Await
 
Meetup angular http client
Meetup angular http clientMeetup angular http client
Meetup angular http client
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
AngularJS for Beginners
AngularJS for BeginnersAngularJS for Beginners
AngularJS for Beginners
 
Modern UI Development With Node.js
Modern UI Development With Node.jsModern UI Development With Node.js
Modern UI Development With Node.js
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 
Introduction to Android Fragments
Introduction to Android FragmentsIntroduction to Android Fragments
Introduction to Android Fragments
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
 
Angular directives and pipes
Angular directives and pipesAngular directives and pipes
Angular directives and pipes
 
React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
 
Design Pattern - Factory Method Pattern
Design Pattern - Factory Method PatternDesign Pattern - Factory Method Pattern
Design Pattern - Factory Method Pattern
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
 
Intents in Android
Intents in AndroidIntents in Android
Intents in Android
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
Js scope
Js scopeJs scope
Js scope
 

Similar to Conditional rendering

Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
Adam Moore
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound
 
Cordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to JavascriptCordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to Javascript
Binu Paul
 
Javascript Deofuscation A manual Approach
Javascript Deofuscation A manual ApproachJavascript Deofuscation A manual Approach
Javascript Deofuscation A manual Approach
Gregory Hanis
 
What is Promise in Angular Development?
What is Promise in Angular Development?What is Promise in Angular Development?
What is Promise in Angular Development?
Albiorix Technology
 
Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script
DivyaKS12
 
MVC 3-RAZOR Validation
MVC 3-RAZOR ValidationMVC 3-RAZOR Validation
MVC 3-RAZOR Validation
Krunal Trivedi
 
Android App Development - 08 Services
Android App Development - 08 ServicesAndroid App Development - 08 Services
Android App Development - 08 Services
Diego Grancini
 
Angular.pptx
Angular.pptxAngular.pptx
Angular.pptx
Govardhan Bhavani
 
Frontend training
Frontend trainingFrontend training
Frontend training
Adrian Caetano
 
Introduction to Ember.js
Introduction to Ember.jsIntroduction to Ember.js
Introduction to Ember.js
Vinoth Kumar
 
Ajaxppt
AjaxpptAjaxppt
Ajaxppt
Iblesoft
 
VB Script Overview
VB Script OverviewVB Script Overview
VB Script Overview
Praveen Gorantla
 
Basics of Javascript
Basics of Javascript Basics of Javascript
Basics of Javascript
poojanov04
 
Top 5 React Performance Optimization Techniques in 2023
Top 5 React Performance Optimization Techniques in 2023Top 5 React Performance Optimization Techniques in 2023
Top 5 React Performance Optimization Techniques in 2023
ultroNeous Technologies | Best Web App Development Company
 
Lar calc10 ch05_sec2
Lar calc10 ch05_sec2Lar calc10 ch05_sec2
Lar calc10 ch05_sec2
Institute of Applied Technology
 
SQL Subqueries - Oracle SQL Fundamentals
SQL Subqueries - Oracle SQL FundamentalsSQL Subqueries - Oracle SQL Fundamentals
SQL Subqueries - Oracle SQL Fundamentals
MuhammadWaheed44
 
Beginning AngularJS
Beginning AngularJSBeginning AngularJS
Beginning AngularJS
Troy Miles
 
Guide to Java.pptx
Guide to Java.pptxGuide to Java.pptx
Guide to Java.pptx
PrathamVaishnav1
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
Ravi Mone
 

Similar to Conditional rendering (20)

Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
Cordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to JavascriptCordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to Javascript
 
Javascript Deofuscation A manual Approach
Javascript Deofuscation A manual ApproachJavascript Deofuscation A manual Approach
Javascript Deofuscation A manual Approach
 
What is Promise in Angular Development?
What is Promise in Angular Development?What is Promise in Angular Development?
What is Promise in Angular Development?
 
Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script
 
MVC 3-RAZOR Validation
MVC 3-RAZOR ValidationMVC 3-RAZOR Validation
MVC 3-RAZOR Validation
 
Android App Development - 08 Services
Android App Development - 08 ServicesAndroid App Development - 08 Services
Android App Development - 08 Services
 
Angular.pptx
Angular.pptxAngular.pptx
Angular.pptx
 
Frontend training
Frontend trainingFrontend training
Frontend training
 
Introduction to Ember.js
Introduction to Ember.jsIntroduction to Ember.js
Introduction to Ember.js
 
Ajaxppt
AjaxpptAjaxppt
Ajaxppt
 
VB Script Overview
VB Script OverviewVB Script Overview
VB Script Overview
 
Basics of Javascript
Basics of Javascript Basics of Javascript
Basics of Javascript
 
Top 5 React Performance Optimization Techniques in 2023
Top 5 React Performance Optimization Techniques in 2023Top 5 React Performance Optimization Techniques in 2023
Top 5 React Performance Optimization Techniques in 2023
 
Lar calc10 ch05_sec2
Lar calc10 ch05_sec2Lar calc10 ch05_sec2
Lar calc10 ch05_sec2
 
SQL Subqueries - Oracle SQL Fundamentals
SQL Subqueries - Oracle SQL FundamentalsSQL Subqueries - Oracle SQL Fundamentals
SQL Subqueries - Oracle SQL Fundamentals
 
Beginning AngularJS
Beginning AngularJSBeginning AngularJS
Beginning AngularJS
 
Guide to Java.pptx
Guide to Java.pptxGuide to Java.pptx
Guide to Java.pptx
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
 

More from Ducat

Dot net training institute
Dot net training instituteDot net training institute
Dot net training institute
Ducat
 
Mis certification
Mis certificationMis certification
Mis certification
Ducat
 
Devops certification
Devops certificationDevops certification
Devops certification
Ducat
 
Best ethical hacking course online
Best ethical hacking course onlineBest ethical hacking course online
Best ethical hacking course online
Ducat
 
React js training course in noida
React js training course in noidaReact js training course in noida
React js training course in noida
Ducat
 
Java for beginners
Java for beginnersJava for beginners
Java for beginners
Ducat
 
Benfits of python
Benfits of pythonBenfits of python
Benfits of python
Ducat
 
Interactive reports development
Interactive reports developmentInteractive reports development
Interactive reports development
Ducat
 
Abap report
Abap reportAbap report
Abap report
Ducat
 
Sap abap database table
Sap abap database tableSap abap database table
Sap abap database table
Ducat
 
Sap s4 hana saps next generation business suite
Sap s4 hana saps next generation business suiteSap s4 hana saps next generation business suite
Sap s4 hana saps next generation business suite
Ducat
 
Connect dashboard designer
Connect dashboard designerConnect dashboard designer
Connect dashboard designer
Ducat
 
Major components of sap hana
Major components of sap hanaMajor components of sap hana
Major components of sap hana
Ducat
 
Schema in sap hana
Schema in sap hanaSchema in sap hana
Schema in sap hana
Ducat
 
Sap hana attribute view
Sap hana attribute viewSap hana attribute view
Sap hana attribute view
Ducat
 
Sap hana studio administration console
Sap hana studio administration consoleSap hana studio administration console
Sap hana studio administration console
Ducat
 
What is ebs
What is ebsWhat is ebs
What is ebs
Ducat
 
Introduction to mern
Introduction to mernIntroduction to mern
Introduction to mern
Ducat
 
Selenium tutorials
Selenium tutorialsSelenium tutorials
Selenium tutorials
Ducat
 
Waits alerts and switch windows
Waits alerts and switch windowsWaits alerts and switch windows
Waits alerts and switch windows
Ducat
 

More from Ducat (20)

Dot net training institute
Dot net training instituteDot net training institute
Dot net training institute
 
Mis certification
Mis certificationMis certification
Mis certification
 
Devops certification
Devops certificationDevops certification
Devops certification
 
Best ethical hacking course online
Best ethical hacking course onlineBest ethical hacking course online
Best ethical hacking course online
 
React js training course in noida
React js training course in noidaReact js training course in noida
React js training course in noida
 
Java for beginners
Java for beginnersJava for beginners
Java for beginners
 
Benfits of python
Benfits of pythonBenfits of python
Benfits of python
 
Interactive reports development
Interactive reports developmentInteractive reports development
Interactive reports development
 
Abap report
Abap reportAbap report
Abap report
 
Sap abap database table
Sap abap database tableSap abap database table
Sap abap database table
 
Sap s4 hana saps next generation business suite
Sap s4 hana saps next generation business suiteSap s4 hana saps next generation business suite
Sap s4 hana saps next generation business suite
 
Connect dashboard designer
Connect dashboard designerConnect dashboard designer
Connect dashboard designer
 
Major components of sap hana
Major components of sap hanaMajor components of sap hana
Major components of sap hana
 
Schema in sap hana
Schema in sap hanaSchema in sap hana
Schema in sap hana
 
Sap hana attribute view
Sap hana attribute viewSap hana attribute view
Sap hana attribute view
 
Sap hana studio administration console
Sap hana studio administration consoleSap hana studio administration console
Sap hana studio administration console
 
What is ebs
What is ebsWhat is ebs
What is ebs
 
Introduction to mern
Introduction to mernIntroduction to mern
Introduction to mern
 
Selenium tutorials
Selenium tutorialsSelenium tutorials
Selenium tutorials
 
Waits alerts and switch windows
Waits alerts and switch windowsWaits alerts and switch windows
Waits alerts and switch windows
 

Recently uploaded

Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Diana Rendina
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
Katrina Pritchard
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Denish Jangid
 
How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience
Wahiba Chair Training & Consulting
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Fajar Baskoro
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
National Information Standards Organization (NISO)
 
How to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold MethodHow to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold Method
Celine George
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
Jyoti Chand
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Dr. Vinod Kumar Kanvaria
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
NgcHiNguyn25
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
สมใจ จันสุกสี
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
Academy of Science of South Africa
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
Celine George
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
RAHUL
 
PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.
Dr. Shivangi Singh Parihar
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
paigestewart1632
 

Recently uploaded (20)

Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
 
How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
 
How to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold MethodHow to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold Method
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
 
PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
 

Conditional rendering

  • 2. Condition Rendering is used to represent output by applying conditions in code with three different approached which is fetched while rendering of code. Suppose we have a code with following condition-: If user is logged in then display ‘you’re welcome’ if not logged in then display ‘Welcome guest’
  • 3. For Example we put conditions on code with three different approaches. • First Approach-: If-Else is first approach. Using If-Else in JSX is not valid so use it outside JSX code as-:
  • 4. • Second Approach Elements Variable- Use JavaScript variables to store elements as-: • Third Approach Ternary conditional operator- Here conditional operator is used. It can be easily used in JSX as-:
  • 5. • Fourth Approach Short Circuit Operator- This Approach is just specific case of ternary conditional operator. You must render something or nothing using short circuit approach.
  • 6. Prevent rendering with Null Advantage of returning “null” instead of empty element is that performance will be improved of the app because react wont Unmount component to replace.
  • 7. • React Element Variables If you don’t want more than one return statement so to avoid writing return Statement again and again use a variable to store the JSX elements and only initialize it when condition is “true”