Conditional Rendering - React In Depth
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: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader
On this page of the site you can watch the video online Conditional Rendering - React In Depth with a duration of hours minute second in good quality, which was uploaded by the user Tech with Nader 29 August 2023, share the link with friends and acquaintances, this video has already been watched 768 times on youtube and it was liked by 50 viewers. Enjoy your viewing!
