Let's learn about Conditional Rendering together in React.
We start with an overview on what this means in the context of React as well as a quick recap of the different conditional statements available to us in Javascript itself that we might see.
Then, we go through using these using if/else, a switch statement, a ternary statement as well as each of the main logical operators like &&, || and ??.
To follow these up, we look at a practical example of how we can conditionally render JSX within a component using state and inputs.
We wrap up the video by looking at some of the common use cases for conditional rendering in React.
Chapters:
00:00 Introduction
01:00 Conditional Rendering Overview
02:24 Conditionals Recap
03:33 If and Else in Components
08:54 Switch in Components
12:27 Ternary Operator in Components
14:03 Logical Operators in Components
15:33 The "AND" Operator
19:10 The "OR" Operator
21:09 Nullish Coalescing Operator
26:08 Conditional Rendering Code Demo
38:34 Common Use Cases
40:26 Next Steps
📦 Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/react-in-depth
💬 Come join us on Discord to chat with a like-minded community about tech and learning: https://discord.gg/K4nkugP7Gd
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: https://www.patreon.com/TechWithNader
