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";
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.
Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on RUclips. 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.
Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on RUclips!
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
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)
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.
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:
./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 😂
![Kumamoto Masters Japan 2024 | Gregoria Mariska Tunjung (INA) [5] vs. Akane Yamaguchi (JPN) [2] | F](http://i.ytimg.com/vi/EIjZybhsWqA/mqdefault.jpg)
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
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..
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 RUclips. 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.
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)
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
Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on RUclips!
I literally watched the first 3 minutes of your video and was able to write my first if/else statement in react...thank you!
The best teacher i've ever seen.
Sir this react series is best series in RUclips 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
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 !!!
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
im stuck in vanilla javascript... but this makes sense much much more
Clean and clear better than paid tutorials
return this.state.isLoggedIn && Welcome Logged || Guest Please add || condition, so that it will have both condition which is better approach
old but good, You guy make my learn so easily ❤️❤️❤️
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)
completed video 16. Thank you 🙂
1:33 - IF/ELSE, 5:05 - Element Variables, 7:07 - Ternary Conditional Operator, 9:22 - Short Circuit Operator
Better then any paid course
Saw a free react course...
Here goes my subscribe
This is incredible content - thank you for all of your hardwork in creating such an easy-to-follow tutorial!
Awesome explanation
render() {
if(this.state.isLogedin){
return(
Welcome Lijo)
}else{
return (
Welcome Guest)
}
This is correct format
Thanks!! Vishwas. I think it's better than paid...
Extraordinary explanation , thank you Sir.
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
Awesome very good explanation, Thanks
Love from Bangladesh
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.
awesome explanation 🙏
reallythanks alot you have excellent way to explaine
Hi bro, your tutorials are really helpful for learning ReactJs. Thanks a lot for your help
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.
I wish that would be more with functions than classes :D
Thanks for the video. Really helpful
¡Amazing! It has helped me a lot, thanks.👏🏻
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.
Man, you are awesome. A terrific tutorial indeed. Love you buddy!
Your explanation is just amazing Sir :)
nice tuturial
I love you, Vishwas.
U are doing grt sir...can you tell me which snippet you are useing for code in react
How is he immediately able to change the closing tag to an auto-closing tag. Like to . Is there any keyboard shortcut for this?
Amazing Video
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.
You are tutorials so good,why are you not posting in udemy so we can buy from you
Thank you .. Good Job
By now, I already love welcoming Viswas 🤣
this is great. I only wish this can be updated to react hooks.
He has a course on React Hooks as well
This is just awesome buddy.
Needed to let you know that you have saved the day for me
thank you so much
{this.state.isLoggedIn ? (Welcome Vishwas) : (Welcome Guest)}
in case of short circuit approach how can we print something in UI if the first condition is false
hello sir what is container and presentation component
Thank you
why did we use return {message}, not return {message} ?
Becoz message variable holds the result of both the cases
nice tutorial
Thnx loads...
How can we return welcome guest with the fourth approach?
Thanks
This stuff cannot be nested. It has to be toplevel inside the return statement.
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.
thank you!! great tutorial series!!
Good day wishes
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"
I found another way to this
Welcome {this.state.isLoggedIn?"Ashish":"Guest"}
can we get code snippets for every lecture ?
what is your plugin in mnt 8.25 for complete your coding
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
Great basics explanation !!! Thx !!!
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.
8:26 What key was pressed to format the code?
@Gabriel Daniluk Thank you. :)
Thanks!
But how does the component know if its logged in or not?
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
but if else it also works in jsx
it will be great if you upgrade your course to react 2021 you surely will get lots of views
return message
This is also enough
./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 {}
Mujhe vishwas ho gya ki main ye kr salts hu
@vishvas i am very thankfull to u. greate job
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
10:00 Short Circuit Operator double ampersand operator
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
if state changes after initial rendering
going through this playlist like snacks
What theme are you using for VS Code Editor? Really loved that Theme..
Should be the default one, at least its for me
You should really learn to use ;
That makes code more readable.
You don't need to use ; in React
@@Breezbriznost It's optional. However, it looks good when using it.
@@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
that's good
Vishwas
what about jsx file