Complete React Tutorial (& Redux) #16 - Conditional Output

Hey gang, in this React tutorial I'll be showing you how to conditionally output parts of our template dependent on certain conditions within our data.To do this we'll use a combo of if statements and ternary operators.

----------------------------------------

🐱‍💻 Course Links:

----------------------------------------

[fidellis]

some instructors are just overrated on Youtube but this guy deserves more than a million subscribers, ,

[othman_]

i can not believe this course is not a paid course. thanks ninja :D

[SimPwear]

Thank you Shaun! Been waiting for this for some time. I am enjoying this series, you're doing a fantastic job. Better than most paid premium courses.

[mwala]

In this example you can also use more functional approach with filter. Instead of ternary operator inside of map you can type: ninjas.filter(ninja => ninja.age > 20).map(ninja => (//ninja component here)). With this approach you just always return result of this expression from your Functional component - Ninjas :)

[ashishshukla]

This is perfect. I was pretty confused watching another react course where they passed the mapped code in the jsx returned value directly. Awesome work and thanks for this.

[KenuraTech]

I am watching after 5 years. Still works. Thanks mate.

[RonanMoris]

You are a fantastic teacher! Congratulations!!!

[antoine]

Very good job, your tutos are awesome, clear english (I'm French) and clear pratices

[nicoregules]

you don't actually need the return keyword in the map function if you are only out putting one thing, also it would be more effective and readable using the filter function to get only what you want instead of using some if statement.
Great series btw, keep up the good work!

[Cho]

I seldom use the 'ternary ' but you made me get close to it. Thanks!

[zahidshaikh]

Ninja Shauchan, Thanks a lot. Watching in 2020

[albertvaldes]

You deserve more subscribers, likes, and views!!

[dekafmusic]

Hello, i think another thing to mention is the use of the && operator to output conditionally.

[raymondmichael]

Again, That was quick!!!

Thanks dude

[kelvin]

Mixing of JSX and JS all in one place is one of the frustration i had when using React. When my app and components getting bigger, and adding display logics like the ternary expression, the code become really hard to debug. Usually, I have mistakingly using a {} and (), or forgot to return the JSX etc. That's why I fall in love instantly later when I saw Vue.

[cvnt]

On the first example, there isn't a need for the else as you will never reach that part of the code with the first return. I'd probably check the age is less then or equal to 20 and return null as well, that way it's even easier to follow:

Const NinjaList = ninjas.map(ninja => {
if (ninja.age <= 20) {
return null
}

return (
<div className="ninja" key={ninja.id}>
<div>Name: {ninja.name}</div>
<div>Age: {ninja.age}</div>
<div>Belt: {ninja.belt}</div>
</div>
)
})

 On the second example IMO ternary operators are best used for one liners. I'd suggest creating a function for the ninja so it'd be like:

return ninja.age > 20 ? <NinjaItem njnja={ninja} /> : null;

[maciejtuaza]

Haven't you considered .filter() instead of if or ternary operator?

[mohamedjolti]

One thing that i can notice here is that Vue is a freamwork more than React in Vue just with v-if or v-show you all this work

[sharminrahman]

May I know how you put comment in front of multiple lines at 2:08? I am using VScode too

[azharponani]

We can also use chaining of filter and map for getting lost of age >20