ReactJS Tutorial - 16 - Conditional Rendering

📱 Follow Codevolution

When you are building React applications, you may often need to show or hide some HTML based on a certain condition.
Luckily, conditional rendering in React works the same way conditions work in JavaScript.
We have 4 different approaches and we will take a detailed look at all of them.
We have if/else, element variables, ternary conditional operator and short circuit operator (&&).

[odntht]

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

[morhaham]

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 = <div> hello </div>
is the same as:
let message =
message.innerHTML = "hello";

[mycourse]

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 and the state/someProperty changes. And last thing I want to mention is you don't need render (), just return.

[chiragparyani]

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

[harshitsen]

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

[m_abosalem]

you make complex stuff, very simple, thank you.

[sardorbekaminjonov]

Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on YouTube. 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.

[noblepolygon]

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

[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)

[elchino]

This course is unbelivable. It worth a lot

[sandeepkosta]

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

[mareboinaravi]

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.

[SaurabhR]

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

[mihajloilic]

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)

[noureddinezekaoui]

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 !!!

[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. 👍

[alejandrourbina]

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

[unknowuser]

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

[mihajloilic]

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.

[dcombsdotio]

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