Code explain stays High today we're Going to talk about using the end Operator in JavaScript in doing Conditional rendering in react and how Can that lead to UI bugs well if you're New to react and you don't know what These conditional rendering conditional Rendering is simply like using Conditions in JavaScript so I will do an example here so let's say I Have here a cost let's say is logged so We're going to check if the user is Logged or not so this could be a prop or State I'm just going to use a const here So I'm going to use an F here an if Statement so if the user is logged I Want to render This button here so I want to render This button that says log out so the User can log out else if that it's not The case if the user is not logged in I Want to render this button here that Says log n and that's simply how the Conditional rendering Works in react so Now I have here the button logout Rendered if this was false I get the button login rendered now Sometimes you don't have a second charge The else charge so you just need to Render something when a condition is True and when it's false you don't want To run there nothing to do user Interface and that's the case when you Use the end operator so I'm going to go
Back to my previous example here and I'm Going to call this condition I'm going to hit save now let's say I Want to render this H2 when this one Here is true and I don't want to render Nothing when this is false when the Condition is false so in that case I'm Not going to use the F statement I'm Just going to go and use some Chloe Braces here to type in JavaScript and Then use condition here and then use And operator and then my H2 now if I hit Save you can see that this is not Rendered because condition here is false But when it's true I get the H2 rendered now but now here Comes the bug these here can all Evaluate to false in JavaScript so false Is already false so I don't see the H2 Rendered null is also evaluated to false So I don't see this one here rendered But when I get to none here if I use None for my condition this must be false So I don't get to render H2 But when I hit save now I will get none Rendered which is something you don't Want to happen in your app now the same Thing when I use 0 Will get rendered an empty string also And when I use undefined It works just fine now before we go and Talk about how to fix this you may ask How these end operator works and if That's something to do with react and
The answer is no this is nothing to do With react this is Javascript and this Is something we call the short circuit Evaluation you can Google that or I will Upload the video soon about it now let's Talk about the facts to fix this we need To use the conditional operator in JavaScript or what we call dictionary Operator so I'm going to use here the Question mark And then Ace colon so if the condition here is True we get to render this and now Because we don't want to run the nothing When this is false we just return null And that's it so now if I use and Define We return null and we get nothing Rendered to the user interface now let's Try none again Now you can see that it's working Because now none is evaluated to false And now we return null again and we get Nothing rendered to the user interface Let's try with zero now Foreign So you can see that's working also so Stop using the end operator and start Using the ternary operator and that's it For today's video If you learned Something new don't forget to subscribe Like comment and share see you in Another tutorial
