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";
Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on TH-cam!
Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on TH-cam. 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.
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
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.
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 !!!
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)
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.
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.
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
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.
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:
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.
./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?
@milan poudel : you get error because you missed to extend it from component Write class UserGreeting extends Component {} instead of class UserGreeting {}
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 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 😂
This is damn ugly. As a Java programmer I really don't understand how you handle this mess and chaos in code. This makes no sense as well as those different approaches don't make sense as well. The only way to make else/if statements is making it as clear as possible. In-line else/if is not clear at all and shame on everyone using it in complex situations. Second approach is completely dumb as there may be complex logic before of afterwards. Only first approach looks reasonable to me, but still it's pure chaos.
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
1:35 - IF/ELSE
5:07 - Element Variables
7:06 - Ternary Conditional Operator
9:20 - Short Circuit Operator
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";
I think this is partially correct. My guess is that it compiles to:
let message = React.createElement('div', 'hello');
ooooh thank youu i always felt weird typing it but now i know what it means :D
Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on TH-cam!
After going through so many different paid and unpaid tutorials, I can this one is the best among all.
Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on TH-cam. 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.
I literally watched the first 3 minutes of your video and was able to write my first if/else statement in react...thank you!
you make complex stuff, very simple , thank you.
this guy is really doing great things..am i right???
@@fennecLens Of course you are right, hope to complete the series
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)
The best teacher i've ever seen.
Sir this react series is best series in TH-cam now.
thanks a ton for your effort.
This course is unbelivable. It worth a lot
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.
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
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.
Vishwas has also taught React hooks though in the later part of the series..
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 !!!
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)
old but good, You guy make my learn so easily ❤️❤️❤️
Man, you are awesome. A terrific tutorial indeed. Love you buddy!
This is incredible content - thank you for all of your hardwork in creating such an easy-to-follow tutorial!
Dear Vishwas,
Hats off to you for all the video tutorials. I've learned a lot from this channel. Keep up the good work. 👍
You are an amazing tutor
1:33 - IF/ELSE, 5:05 - Element Variables, 7:07 - Ternary Conditional Operator, 9:22 - Short Circuit Operator
This is just awesome buddy.
Needed to let you know that you have saved the day for me
Extraordinary explanation , thank you Sir.
¡Amazing! It has helped me a lot, thanks.👏🏻
How is he immediately able to change the closing tag to an auto-closing tag. Like to . Is there any keyboard shortcut for this?
in case of short circuit approach how can we print something in UI if the first condition is false
Your explanation is just amazing Sir :)
Hi bro, your tutorials are really helpful for learning ReactJs. Thanks a lot for your help
awesome explanation 🙏
Clean and clear better than paid tutorials
8:26 What key was pressed to format the code?
@Gabriel Daniluk Thank you. :)
completed video 16. Thank you 🙂
Saw a free react course...
Here goes my subscribe
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.
Thanks for the video. Really helpful
Awesome explanation
Awesome very good explanation, Thanks
How can I use this kind of condition inside map function ,it does not support inside map .
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"
U are doing grt sir...can you tell me which snippet you are useing for code in react
How can we return welcome guest with the fourth approach?
hello sir what is container and presentation component
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.
reallythanks alot you have excellent way to explaine
im stuck in vanilla javascript... but this makes sense much much more
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.
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.
why did we use return {message}, not return {message} ?
Becoz message variable holds the result of both the cases
This stuff cannot be nested. It has to be toplevel inside the return statement.
return this.state.isLoggedIn && Welcome Logged || Guest Please add || condition, so that it will have both condition which is better approach
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
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.
We MUST use it for CSS in javascript.
can we get code snippets for every lecture ?
By now, I already love welcoming Viswas 🤣
I wish that would be more with functions than classes :D
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:
Its so weird that we can't use `if...else` but can use ternary.
But how does the component know if its logged in or not?
Better then any paid course
what is your plugin in mnt 8.25 for complete your coding
Love from Bangladesh
it is very good tutorial
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
At 8.29 you adjusted the code, what is the shortcut to do so?
i guess its code formatter prettier
It's VS Code extension
I love you, Vishwas.
Amazing Video
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
Thanks!! Vishwas. I think it's better than paid...
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.
nice tuturial
./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?
@milan poudel : you get error because you missed to extend it from component
Write class UserGreeting extends Component {} instead of class UserGreeting {}
thank you!! great tutorial series!!
I'm coming from Vue/Angular. I wanna kill myself after discover how React manages conditional rendering.
I'm dead.
Why man??
In Angular, we have coolest directives , right;)
Live with that
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
@@dawoodchaudary8736 Does that mean its a lot harder?
@@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 😂
I totally agree. Angular is way more elegant but I have to learn this because unfortunately it's more popular in the industry
You are tutorials so good,why are you not posting in udemy so we can buy from you
Thank you .. Good Job
amazing !
what's the name of the fourth approach again?
Noor, fourth approach is short circuit operator
please update it usi g functional component ,It's becomes too difficult to understand
10:00 Short Circuit Operator double ampersand operator
Great basics explanation !!! Thx !!!
render() {
if(this.state.isLogedin){
return(
Welcome Lijo)
}else{
return (
Welcome Guest)
}
This is correct format
this is great. I only wish this can be updated to react hooks.
He has a course on React Hooks as well
but if else it also works in jsx
nice tutorial
how to comment multiple lines using // with a single try?
select the lines and click ctrl + '/'
install the Babel Javascript extension in VS Code!
and then select the lines and hit this shortcut key : ctrl + '/'
is your name vishwas?
thank you so much
Thank you
if state changes after initial rendering
what about jsx file
Thnx loads...
Thanks!
in angular we just use *ngIf within the element haha
yaa and in Vue just use V-if, don't know why react is so complex for conditionl rendering
Thanks
What theme are you using for VS Code Editor? Really loved that Theme..
Should be the default one, at least its for me
I found another way to this
Welcome {this.state.isLoggedIn?"Ashish":"Guest"}
This is damn ugly. As a Java programmer I really don't understand how you handle this mess and chaos in code. This makes no sense as well as those different approaches don't make sense as well. The only way to make else/if statements is making it as clear as possible. In-line else/if is not clear at all and shame on everyone using it in complex situations. Second approach is completely dumb as there may be complex logic before of afterwards. Only first approach looks reasonable to me, but still it's pure chaos.
And this way of statement && expression is totally out of this galaxy really people don't do this in your code...
Enlighten us then.
@@sthitaprajnamishra9831 how can i u brudas if im already teelling you
A recipe
I had a doubt I am unable to remember this all in react i might remember what is what but not the syntax can you tell what to do?plz help
{this.state.isLoggedIn ? (Welcome Vishwas) : (Welcome Guest)}
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
Do u have tutorial upload (multi)image for react native?
Good day wishes
going through this playlist like snacks