ReactJS Tutorial - 16 - Conditional Rendering

[@odntht]

1:35 - IF/ELSE 5:07 - Element Variables 7:06 - Ternary Conditional Operator 9:20 - Short Circuit Operator

[@morhaham6609]

For anyone who wonders why can we put jsx element inside a variable without it being a string, it's because jsx elements are just wrappers for function calls. so: let message = hello is the same as: let message = document.createElement('div'); message.innerHTML = "hello";

[@animeshkumar9593]

I think this is partially correct. My guess is that it compiles to: let message = React.createElement('div', 'hello');

[@justash123]

ooooh thank youu i always felt weird typing it but now i know what it means :D

[@harshitsen5479]

After going through so many different paid and unpaid tutorials, I can this one is the best among all.

[@sardorbekaminjonov9075]

Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on KZbin. Almost all of these videos do not attempt to provide full instructions. They just cover the basics and say if you want to get the full tutorial click the link below and get it with a discount. So it is a sorta advertisement. But your course is better than theirs. Even Mosh Hamedani's react course cannot provide as clear details as yours can. I APPRECIATE YOU BROTHER. THANKS FROM UZBEKISTAN.

[@chiragparyani462]

Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on KZbin!

[@toannew]

0:35 frou kinds of conditional rendering 4:40 JSX is syntactic function of ... 5:10 2nd approach: element variable approach 7:58 3rd approach: ternary condition operator (recommended) 9:10 4th short-circuit operator approach (recommended)

[@noblepolygon8694]

I literally watched the first 3 minutes of your video and was able to write my first if/else statement in react...thank you!

[@mycourse3754]

For those who are watching this in 2022 and are unhappy that Vishwas is using classes instead of functions, you can code along using functions. make sure that instead of creating a constructor with this.state={someProperty: "someValue"}, you just create a useState hook like this: const [someProperty, setSomeProperty] = useState("someValue"). Make sure you import {useState} from 'react'. Also whenever Vishwas is using this.setState("anotherValue") to change this.state, you simply uset setSomeProperty("anotherValue") and the state/someProperty changes. And last thing I want to mention is you don't need render (), just return.

[@ketankumar5689]

Vishwas has also taught React hooks though in the later part of the series..

[@m_abosalem]

you make complex stuff, very simple , thank you.

[@fennecLens]

this guy is really doing great things..am i right???

[@m_abosalem]

@@fennecLens Of course you are right, hope to complete the series

[@mareboinaravi5272]

00:24 - different types 00:35 - If / Else 05:07 - Element Variables 07:06 - Ternary Conditional Operator(? :) 09:20 - Short Circuit Operator(&&) Thank me later.

[@nguyendat4275]

The best teacher i've ever seen.

[@SaurabhR777]

00:05 Conditional rendering in React allows showing or hiding HTML based on conditions. 01:39 Adding conditional rendering in ReactJS 03:12 Conditional rendering in ReactJS with if-else statement 04:49 Conditional rendering in ReactJS using if-else statements and element variables 06:26 Implement ternary conditional operator for simpler JSX rendering 08:00 Conditional Rendering in ReactJS using ternary operator 09:19 Conditional rendering in ReactJS using short-circuit operator. 10:38 Four approaches to conditionally render UI in React

[@sandeepkosta5750]

Sir this react series is best series in KZbin now. thanks a ton for your effort.

[@elchino7672]

This course is unbelivable. It worth a lot

[@noureddinezekaoui4546]

Creating a new file in the components folder every time we switch to another concept is just an amazing choice to keep track of our previous work and come back to it later if we need to! thank you very much for the amazing content. keep it hight and up !!!

[@mihajloilic5836]

Hey dude, I am very happy about this your tutorial! :) You helped me to find a way to solve some of my own ideas in coding in some advances from the previous lessons. GREAT JOB!!! (Y)

[@AAKSHAS]

1:33 - IF/ELSE, 5:05 - Element Variables, 7:07 - Ternary Conditional Operator, 9:22 - Short Circuit Operator

[@RoadsInCanada]

Dear Vishwas, Hats off to you for all the video tutorials. I've learned a lot from this channel. Keep up the good work. 👍

[@unknowuser2601]

old but good, You guy make my learn so easily ❤️❤️❤️

[@softwaredevnk166]

You are an amazing tutor

[@lathagm666]

completed video 16. Thank you 🙂

[@MarleySkunk]

im stuck in vanilla javascript... but this makes sense much much more

[@dcombsdotio8662]

This is incredible content - thank you for all of your hardwork in creating such an easy-to-follow tutorial!

[@burhanali9117]

Saw a free react course... Here goes my subscribe

[@HussainsTechStack]

return this.state.isLoggedIn && Welcome Logged || Guest Please add || condition, so that it will have both condition which is better approach

[@nogafouz2174]

reallythanks alot you have excellent way to explaine

[@alejandrourbina5928]

¡Amazing! It has helped me a lot, thanks.👏🏻

[@habamoise4771]

Awesome very good explanation, Thanks

[@vaibsify]

awesome explanation 🙏

[@laharinamala8373]

Extraordinary explanation , thank you Sir.

[@MuhammadAhmed-wb2sq]

Thanks for the video. Really helpful

[@VishalSharma-rn7mt]

Awesome explanation

[@ai.201]

Better then any paid course

[@timbootcamp8943]

I wish that would be more with functions than classes :D

[@lijojohn6273]

render() { if(this.state.isLogedin){ return( Welcome Lijo) }else{ return ( Welcome Guest) } This is correct format

[@den_3696]

You can also: ( this.state.condition && outcome A || outcome B ). Or : ( this.state.condition ? outcome A : null ). Not really important, in general these operations do the same thing, just good too know that.

[@metizdev7945]

Thanks!! Vishwas. I think it's better than paid...

[@sukhesh1000]

Hi bro, your tutorials are really helpful for learning ReactJs. Thanks a lot for your help

[@SharpalloSharpallo]

it is very good tutorial

[@poornachandrag6407]

Clean and clear better than paid tutorials

[@Salimansasili]

nice tuturial

[@candidfarmer425]

Man, you are awesome. A terrific tutorial indeed. Love you buddy!

[@prisinha]

10:00 Short Circuit Operator double ampersand operator

[@kartikthakre8273]

U are doing grt sir...can you tell me which snippet you are useing for code in react

[@ioannisventouzis]

The tutorial is super. My only concern is related with return statements in the render method, it is no clear when we use parenthesis, when we use curly braces and when nothing. For example in this video when element variables used as an option, the {message} variable can't used without div's, this is strange because the {message} is already included in div tags at the if/else statements.

[@azo9592]

I know this is a relatively old comment but I'll just input what I understood so that it might give others an idea. Regarding the element variables method, remember that returned JSX elements always have to be enclosed within a single tag (usually div). In the example code the final message variable returned does not actually require an outer div tag before returning because it is storing only one tag inside, but if the message variable stores multiple tags like maybe a div tag and a button outside the div, then enclosing the message variable within an outer div tag before returning ensures errors do not happen. Regarding the return statements, we use parenthesis when we have more than one executing statement. So if you are using Ternary operator methods, the whole a ? b : c or a && b are single executing statements and hence do not require parentheses, whereas each JSX tag are individual executing statements so better to enclose them in parentheses if you have more than one JSX tag. To avoid confusion you can opt to use parentheses all the time.

[@mamunethan1356]

Love from Bangladesh

[@jakubgadzala7474]

By now, I already love welcoming Viswas 🤣

[@mihajloilic5836]

Is it ok to use first/second approach? I really don't respect 3rd and 4th and never used it before, I should get familiar with it through time.

[@vignesh7609]

Is there any difference other than the syntax ? // Type3: Ternanry Operator return this.state.isLoggedin ? Welocme Vignesh : Welocme Guest // Type4: ShortCircuit Condition return this.state.isLoggedin && Welocme Vignesh || Welocme Guest

[@questreal5812]

How is he immediately able to change the closing tag to an auto-closing tag. Like to . Is there any keyboard shortcut for this?

[@moinakhter2474]

Your explanation is just amazing Sir :)

[@moderncloth]

I love you, Vishwas.

[@lasithadulshan7357]

Thank you .. Good Job

[@Naveen-xz6ml]

This is just awesome buddy. Needed to let you know that you have saved the day for me

[@marypaul9627]

You are tutorials so good,why are you not posting in udemy so we can buy from you

[@obinna_ac2840]

thank you so much

[@sajalsuhane8644]

in case of short circuit approach how can we print something in UI if the first condition is false

[@conaxliu9677]

8:26 What key was pressed to format the code?

[@conaxliu9677]

@Gabriel Daniluk Thank you. :)

[@sanjayjoshi5778]

hello sir what is container and presentation component

[@wilghensantos]

this is great. I only wish this can be updated to react hooks.

[@sanghamitragupta9760]

He has a course on React Hooks as well

[@Aditya.Santra]

Amazing Video

[@pankajxkumar]

why did we use return {message}, not return {message} ?

[@20skidscartoonshows24]

Becoz message variable holds the result of both the cases

[@AhamedKabeer-wn1jb]

Thank you

[@yazanalmatar8948]

I've noticed that throughout the whole course you've never used a semicolon to break your statements... I wonder if it makes a difference and why would we use it sometimes? thank you

[@yogibaba6008]

Java script treats every line break as an "implicit" semicolon. This is called java script "automatic semicolon insertion". In most cases new line implies a semicolon but every new line does not mean a semicolon. Hence only seasoned developers should omit semicolon as they are aware of its pros and cons.

[@SheshagiriPai]

We MUST use it for CSS in javascript.

[@ekinsuflashege2402]

bu güzel anlatım için çok teşekkür ederim. ingilizce bilmediğim halde yinede anlıyorum. sizin gibi değerli insanlara ihtiyacımız var.

[@manjunathreddy5210]

{this.state.isLoggedIn ? (Welcome Vishwas) : (Welcome Guest)}

[@yassinezir5088]

Thanks

[@nermeenghanem4309]

Thnx loads...

[@vigneshgvs]

in jsx (return) part - can't write if/else but in render method outside jsx, can write if/else, variable decla&usages, ternary operator, logical && - to conditionally render UI in react:

[@richardtbohnen5070]

Its so weird that we can't use `if...else` but can use ternary.

[@wanishoaib_]

This stuff cannot be nested. It has to be toplevel inside the return statement.

[@anas2004]

nice tutorial

[@zainabideen8144]

How can we return welcome guest with the fourth approach?

[@shivamyadav4846]

can we get code snippets for every lecture ?

[@lincolemos]

I'm coming from Vue/Angular. I wanna kill myself after discover how React manages conditional rendering. I'm dead.

[@LogeshSLohit]

Why man?? In Angular, we have coolest directives , right;) Live with that

[@dawoodchaudary8736]

fuckin right i thought i should give react a try i am from vue background and the way react handles iterative elements and conditional rendering its disgusting

[@KanecoV]

@@dawoodchaudary8736 Does that mean its a lot harder?

[@dawoodchaudary8736]

@@KanecoV its a bit different in a sense but you get hold of it after working in it Not harder but comparing to Vue .React conditional renedering and iterating syntax is inferior 😂

[@ahmadsaleh7887]

I totally agree. Angular is way more elegant but I have to learn this because unfortunately it's more popular in the industry

[@rahmanrio7194]

How can I use this kind of condition inside map function ,it does not support inside map .

[@bhojakrahul5880]

how to set render condition in my form is data is not there see "add button" and data is there in databse see "update button"

[@mrrishiraj88]

Good day wishes

[@michaelrooze278]

But how does the component know if its logged in or not?

[@mohammadqaderi8976]

in angular we just use *ngIf within the element haha

[@muaazhammad4446]

yaa and in Vue just use V-if, don't know why react is so complex for conditionl rendering

[@muaazhammad4446]

Why does React don't have directeve like v-if or v-show to conditionaliy render data just like in Vue ???. it is much simpler and easer

[@khusanmeliev]

but if else it also works in jsx

[@luismendoza8428]

if state changes after initial rendering

[@meidymahardika6435]

what is your plugin in mnt 8.25 for complete your coding

[@noorbohsas489]

amazing ! what's the name of the fourth approach again?

[@syntaxcake4545]

Noor, fourth approach is short circuit operator

[@shushmapatil]

At 8.29 you adjusted the code, what is the shortcut to do so?

[@HPec-ax]

i guess its code formatter prettier

[@mareboinaravi5272]

It's VS Code extension

[@milanpoudel3737]

./src/components/UserGreeting.js SyntaxError: C:\Users\Dell eact app\hello\src\components\UserGreeting.js: super() is only valid inside a class constructor of a subclass. Maybe a typo in the method name ('constructor') or not extending another class? (5:2).....What kind of error is this?

[@abhijeetjadhav2606]

@milan poudel : you get error because you missed to extend it from component Write class UserGreeting extends Component {} instead of class UserGreeting {}

[@eurythmia9840]

thank you!! great tutorial series!!

[@lopyus]

I found another way to this Welcome {this.state.isLoggedIn?"Ashish":"Guest"}

[@9a56mahabirjaiswal9]

please update it usi g functional component ,It's becomes too difficult to understand

[@jagdishshetty4782]

Great basics explanation !!! Thx !!!

[@andy.n3]

Thanks!

[@Chauhannitin]

return message This is also enough

[@burhanali9117]

it will be great if you upgrade your course to react 2021 you surely will get lots of views

[@noordinabdulkadir351]

going through this playlist like snacks

[@shaheedk-sm7ho]

is your name vishwas?

[@shoaibamin4342]

@vishvas i am very thankfull to u. greate job

[@ameetshrestha6424]

What theme are you using for VS Code Editor? Really loved that Theme..

[@AM-ey2vn]

Should be the default one, at least its for me

[@deepikasrinivasasharma7481]

what about jsx file

[@24306529]

this whole mixing of html syntax with JS syntax is a pure mess at least for the beginners .. I mean, at the very beginning of the web applications, people used to write JS code in the HTML and we were taught in the colleges how bad that is, we should keep JS and HTML codes separate and hence JQuery and AngularJS were born .. and look at this .. its like going backwards .. doing all this better have some advantages now otherwise its pure frustration for newbies

[@logs]

You should really learn to use ; That makes code more readable.

[@Breezbriznost]

You don't need to use ; in React

[@logs]

@@Breezbriznost It's optional. However, it looks good when using it.

[@24306529]

​@@Breezbriznost yes it is optional but its a good practice and leaves no room for errors later..I suggest to watch videos from douglas crockford