#9: React Conditional rendering in JSX : React v19 Tutorial in Hindi

Hello whats up guys my name is vinod bad thapa and today in this video we will see conditional values ​​in j x yes guys today 's video is very important because today we will see conditional values how to use them in j6 tomorrow's video What we saw in today's video is how we can use dynamic values ​​and in today's video we will see how we can use conditional values call your ternary operators call your logical operators conditional operators I hope you know why because we already In our JavaScript course on World, we understood conditional operators very well, and operator, turn operator, not operator, then how can we use all these things in React, today I am going to tell you in this video. Guys, the video is very good. If it is more important then you can't miss it. And so guy, now you just relax, you are going to enjoy a lot in this video, so without any delay, let's go to our computer screen. Alright guys, so you can see that we are Have come to the computer screen and today we have to see conditional values ​​in j6. In yesterday's video we had seen how you can write completely dynamic values ​​but today in this video I will show that now how you can pass conditional values ​​in j6. Look conditional operator I know you know what we call right go in the script we have a conditional operator you understand what we call so the same piece of operators if I have to use in react inside a component and you can say To be more specific like in with JS then this is a very important video okay so you can either return a JS early and you can use binary operators for the conditional in JS what does this mean for example a return a paragraph return a paragraph to you In which you have to pass two values ​​i.e. that guy is a minor and he is an adult right then you have to pass this, now how do you know whether that guy or prisoner is an adult or a minor. Now we need a Condition over here if that person age is greater than 18 and equals to 18 is adult is an adult right but if her age is less than 18 and she is minor right then how can we give that condition then guys like We used to give conditions in normal JavaScript, the same has been done in React also and we know that now if I want to enter the world of JavaScript, we need to use curly braces. We need to take the help of curly braces inside our JS. On a simple paragraph I am keeping that if this is the age if it is greater than 18 then return adult else return minor so this is your ternary operator here we are using and operator that like if this is true then only like this you show and Here we are using n operator simple ok so all this is already I have uploaded the video what is this logical operator and operator conditional operator and all this all guys you will get our world best which is the course of JavaScript in this JavaScript everything is an object and in react everything is a component wow there is a world of objects there is a world of components and component is a function chach return your JS a l right guys so now to show you conditional values ​​or operator I am here Let's not add another button like I am adding another element and now right this way I have added it I go here and show pay and so now we have one button right so now guys we have one button now look at each one Like series are not for children, some are R rated, some are for adults, not every series is for children, so we need to make it so that we are making this website which can be used by children of any age. If the age is greater than 18 then the button should come here to watch now and if the age is less than 18 Now it is not available here and come right. Now how will we know that like? Finally, there is something that you are enjoying now. Think for yourself, what will you do now that if age is greater than and equal to 18, this word should not be visible to them. If it is not there, then it is not available or not accessible, you can write anything, or you can disable the button. Come on, tell me what you will do, tell me what you will do, tell me how you will do it. All right, not coming. Doesn't matter, nothing happens because for the first time you see. Be right, let me tell you, look, there are four ways to do it, the first way, I do one thing, let's assume, let's assume we have one value, let's edge is equal to 16 for now there is an edge which is 16, okay we know that. We are getting the edge for each student. How else will we know? So we have one edge. Now we have to make it dynamic. C return, we can do only one. Okay, so what will I do? Look carefully here. If the Age is greater lesson sorry less than 18 if a lesson 18 then write the same piece of code which is and then paste in this manner and now this is which is now then this is the particular code I will write not available here in this manner Simple, so we have imposed the condition, look, this piece of code is in its place as it is, but each component returns only one thing, this is what you have to do, no matter how many times you return, but this This is a particular component, it is going to return only one, your object is going to return only one, okay or say only one data element, whatever you want to say, now if the edge is less than 18, then it will return this particular piece of code where Here we know that if he is younger than 18 then we have made the button not available else if that age is older then it will ignore it and will come to this particular piece of text where watch now is our button control a save. Let's go here so we have see see now it's not available how did it feel so awesome right so now we have this not available not available not available so it's going on so this was a first method but alright guys how did it feel na very Hi more awesome I told you that today in this video I will tell you four ways, this is the first way, this is a problem, here we have one problem with this way, style you know and that is guys, this is the first way, this is a very bad rule. Like is leaving behind and that is do not repeat yourself tell me one thing just because the age is less then 18 has to happen if it happened then I had to change the button for that I used the same piece of code look at it I had to do it this way So remember that earlier video where I was doing copy paste copy paste copy paste five times before making the component, today I did the same thing again, now this is bad, this is wrong, this is not wrong, this is correct but This is a rule of Do not repeat yourself, it is not following it, remove it. Second method, let me tell you here we go, so the second method tells you how we can do see and can use nari operator right, this is what we see now. Remove this and write the brace so now we are in our JavaScript world if a which is it's greater than and equal to 18 then question mark and now then we have no colon not available oh my God oh my God see a little while Earlier I had to do so much, but now I have used simple ternary operator, if edge is greater than or equal to 18, please add the text of the button, else you can add this piece of code, believe me guy. When you do this with the help of JavaScript, what do you have to do again? Give an ID to the button. What do you do? Here, you could have written document o sorry document dot get element or query selector but let's go. With Get Element by ID, here you select this button. Let's imagine you had created a custom LM in this way. What would you have done? The text content of the LM will be equal to 2. Here, basically you don't even do this. Now what would you have done? Let's hit the condition here if is not if edge is this then save the condition of the text if it is fulfilled else same piece of code paste here what would you have done write something like this not available in this way here I I will do it properly. Are you understanding, you are seeing that guys, you don't have to do anything if it is greater than 18 or equal to 18. Right in this way, if you see, you have to do so much, you have to do so much in a simple JavaScript but in React. See how easily we have done it right, so this is what is being said here is imperative and I am telling you each and every thing, I do this, access it in this way, then check this, then enter this data in it, but here. So there is nothing here so directly declarer brother, if older than 18 then this is finished, rest you put in which button where and what to do as per your wish so this is your reaction so guys this was your second method with the With the help of ternary operator then a third method let me show you and that is this is where we go some times you might have very complexity for that there are some solutions okay this was very simple that is above 18 but one more I will tell you the method, okay, I am leaving it as a comment. And by the way, comments in React are made in this manner because this is the world of JavaScript, so you will have to give braces only. It is okay here too, so what is the third solution? If it happens, then guys, look carefully here at what I am doing, I create a variable, it is ok to check it, and here I am changing it to not available for now, I have created a variable, now I know a simple condition. I will keep if a is greater than and equal to 18 a which can check the value of which is I will check now and directly I as it is so cannot write it simple write then see by default what is its value is not available but if a If the value of key is greater than or equal to 18 then I am changing its value to Kisma Watch Now, okay simple, now what will I do simple, you can't imagine, I will come here, button and I can watch finish, just see this. By default, what is its value, it is not available, but if someone's age is 18 or older, then its value will change. Kisme watch now. And after coming here, I have written 'watch now' in the blank. Now if you read this particular piece of mine, If you look at the code, it looks so clean but behind the scene you are passing variables, giving expressions, calling the function and here you are using condition operator. Now if I go here then it is not available. Why not available because age is what it is, how much is it I guess it is 16 but let's go with 19 now it is bigger than 18 see automatic this watch is now done see watch now watch now this is your watch now so how was it guys enjoying Is it true that I told you in our React series that even if it takes time, but in this way we will study that we have come back, we will not have to look back, we will have to look back, we will have to practice, but the athlete will have to practice with so much love. Be relaxed and just like friends, if we are learning and studying together, then what is the tension, friend? Relax is absolutely fine, I told you three ways, first was Do Not Repeat Yourself, useless method, second was Ternary Operator, I told you now this. It became even easier here that you can simply watch and here I showed you this method, okay, now I am commenting on this too, by the way for the time being, so guys, now what is our final fourth solution, see what I wrote. Has solutions can be better as it prevents cluttering of variables outside and encapsulates logic inside a function One another benefit is that you can also pass some dynamic values ​​as a function parameter I know now you might not understand what is this but this was after Na let's go back to time travel and let's go back a little bit to see why we are talking about this. Look at this. Remember, I can call the function, so why should I copy this? I have removed this, now I will go back here to the particular piece code which was back to cost can watch right, look carefully here, so simply now I am if look guys no matter what then you have to pass if the age is greater than this. No need to write the part which is na can watch, I will directly write in this way if the age which is bigger or equal to 18 then watch now and else if it is not there then we can return not available so now beauty pata kya hai Here you are calling a function where now if you look here the same thing is written that now one other benefit is that you can also pass some dynamic values ​​as a function parameter now it has become a function it is here You can pass a lot of things like if a is greater than and equal to 18 now else return y simple and here you have called the function like this now if I go here guys you see this is not available not Available is not available and I want to see why it is showing and age kitna hai by the way ok so if age is 19 then I guess and I am sorry I guess here you have to write return that is fat arrow function I did not know how to write return but in the if condition you have to write and or si in front of you now this is yours now right so or guy this is it this was your conditional operator and I told you four ways and one And the method here was simple in which you could use the AND operator, but I will tell you some other time when we will work, but how did you like these four methods, there is something else besides this, so tell me how else can you use it? You can let me know in the comment section because this will give a little pressure to your brain, a little pressure will also come that how is it happening oh my God I think here the spelling was Rang only then or Perfect C is fine in this way. So I hope guys, you like the video very much, you must be feeling that they tell us in separate videos tomorrow, but no, it has its own value, its own importance, in which way it is done, watch it only one button. Showing pay as dynamic, either watch now or not available, there were so many ways to do it, it was not fun to tell in yesterday's video, ok all right guy, so that's all for this video today, I hope you like it very much, Aga and till now. Till now, if you have watched the video and continue my series, then you have learned a lot, I can guarantee you that now you can freely create a static website on Atlas. I know, what is coming in your mind that CSS tells this? So very soon, one more day, now we are going to watch videos on CSS and you will enjoy because we have seen the Java Script, we have seen the conditional, we have seen the dynamic, as if you understand the components, you have understood your CSS, this is your ATML CSS. It's all JavaScript, it's just a reaction, but behind the scene, everything is the same, so I hope now you must have understood what I said, everything is slowly becoming true, you will get a lot more in the future, okay alright guy. So guys, if you like the video, please like it. If you don't like it, dislike it, but do something. And if you like the video, please comment because your appreciation gives me a lot of encouragement. Do you understand? And even if there is any doubt, you Feel free to comment in our comment section because at this time I am completely ready to answer each and every comment of yours. If I end up, I am also uploading shorts videos. You will enjoy it even more by tagging your comments, okay, this is it. Baat pe guys now our next target is 1 million subscribers so if you haven't subscribed yet then please do so I will meet you in the next video till then guys thank you so much take care [music]