#13: Props in React JS - Making Netflix Cards Reusable🔥React Tutorial in Hindi

Hello what's up guy my name is Vinod Bad Thapa and today in this video we will see props in JS one yes guy today's video is very important and going to be awesome because today we are finally going to see the props which are In our re j props let me tell you what happens let's go right here so here we have a props in js where you can see very clearly basically props is a short form of properties like in javascript I mean sorry in ATML We have the variables that we write inside the variable, we call them props. Which is your properties, so these are the properties of React. It facilitates data transfer from parent to child components. We have already seen what is component, how to import and export, that's it now. Here, how can we transfer the data from parent to child, now we have to understand it completely, we have to understand that game, basically data flows uni- directionally, it means unidirectional, it is going from top to bottom, from parent to child, right. Now props are immutable meaning child components cannot modify the data received from the parent they cannot modify it nor can they modify them child components access props through their functions parameters You can also pass such props to other components Okay, I deliberately tell you this in advance so that when we do the practical now, you will understand slowly. Okay friend, he had said these things earlier, it means that you are understanding. Okay, so first of all you should know what are the props. Basically in ATML the attrib is fine and it flows from parent to child unidirectionally. This is useful for you to send some data from parent to child. You will understand this. Alright so now we have this then this paragraph is visible. So now what we have to do is to make it better, okay let me tell you how, see I go through the props here, I will try to make it easy for you in the example, there is still one thing to look at carefully where Current element is current element is current element okay now one more thing look carefully here as I walk in this place so look at the flow yes what is happening look carefully the flow is very important here here we have this our a component which That's what we are doing, okay, if I go to this, then this is your netflix's component inside which I am returning whatever cards I have created with the help of map method, but the fact is that if the code is called a To keep it neat and clean, it is better to return one code at a time, one components at a time. Okay, so here you can see that whenever you use map method, it is considered a best practice that you can return it directly there. Do n't define it like this, instead this is a particular card, you create a separate component for it and then from there you can call it here, like what we did is that so here we have this component and inside component we Will create one more file whose name will be a list kar do hoon list d js aap bhi likh sakti ho just maine a series list ya netflix's card perfect rahega hai na const const and we have b series series I have written series only na ya series Data is fine, here we go in this manner and by the way, whenever you create a component, keep capital, it is better, end or series, not data, sorry, lock, you can write anything on this, first thing is fine, so I Let's return and have this part and look carefully, this one is the written part, okay, here we have this written part, I am copying it, till where it is, by the way, I have removed it till here, let me go here and paste it. So look carefully what I did here, so all right, we have total to returns, I remove this and I also remove this in this way, so either you are seeing how awesome it is, I export it. I am perfect here, so now look carefully, okay, this is my Jason file, inside a component, we have this netflix's component, inside that, what am I doing, inside the yul, I ran this map and what will I do through this map. I will call one component and the name of that component will be series card and or this is it. I have closed it. I mean, you are seeing how the flow is being formed, how is this structure of yours, how is it being formed now, this current. Whenever I call through map method, all my data is right in the current element, so this is the current element, I have to pass it here, so I write S current, let's just write the current element for now and You pass the current element in this manner, for one second you have to pass the current element. Okay, so you pass this current element. Now, this current element that you are seeing is your props because what are we using? We are using a JS one and inside the JS one also I am calling a component whenever you are calling a component and that and along with that if you want to pass some data also then what do we use We use props, so this is what you see, here this is my parent and inside that I am calling this child component and in that I am passing the data through these props, which is transferring, okay. Okay perfect now one thing you keep in mind whenever you pass data in this way no matter what you know we need to pass a key props so here we have a current element dat id my work is done simple right now I have to go to the series card, look carefully at this part, I have passed two props, one is the key and the other is my current element, so I will go here, now you have to write the props here, although you can write anything here. But generally everyone writes props here, so I will copy it. Now look carefully, I am copying all the current elements that you are seeing. In this way, basically I have written the props of the highlight and then I will write the dot, this is it. My work is done, what did I do, I am getting the props, see, I am in this component, in my child component, I have passed these two props, one of which is props dot current element props dot this one current element and we did a little while ago I had seen it in yesterday's video, Current Element ID, here you can see everything, name is ID, image is there, rating is there, you can see everything here, the parameter is fine, so whatever it is, I got it in this way. Done Alright, now here you see the current element is missing in props, so this is a particular warning that you are seeing, I will tell you in tomorrow's video what it means or how you can correct it because it is important at the moment. Now you understand, there is no such error, it is just a warning of Slint, we are getting here, so if you just do this and control a save and if you go here and refresh, then you see. You can see that right now nothing is visible and let us check once the body we have this deep and then we have this URL okay so again inside this URL you can see that you are not able to see any data okay so Look, we are returning and here you don't write this directly, you can also pass the key directly, tell me why because I have passed this inside the already key, so you can write props dot key in this way. No or even if you don't write, there is no problem. By the way, if I think it's okay, even if you do n't write, there is no problem because I have already paid here, it has been given, there is one key with each series card, okay. So here we go and this is the particular portion, the same thing is happening here and that is whether you have to return or not and in this way and whenever you use the fat arrow function and if Using single line of code then guys you don't have to in write this written keyword and end just bra parts or see this so how neat I mean see for yourself here we have our a component right and by the way if here If there is only one single component, then you don't even need it. Look simple, so this is our A component inside which I am calling netflix's and a This is a component which is the cell component with the netflix's card in which I am calling Have passed two props, now here if I go, here I have got that props and I know that if I do props dot current element, then whatever data I am going to get inside it, props dot if I do that, however There is no need to do this because by default I have given the key here, so I do not have any problem. Now if I go here, boom guys, I have got all the data as it is, but this time we have simplified it further. We saw the power of props, how beautifully we are tackling it, so you can see guys, how beautifully we have got our data and how neat and clean it looks, our app has written the props, now props. There is no problem even if you do it instead of 'props', he did not say that you have to write only specific props, but yes, we know that this is a property, there are props, so why don't we write props here. It remains like this but apart from that you can write anything, so I am back to props here. Okay guys, one more thing here, you will keep in mind that this is our props, this is our props, this is very It is more important, right now it will not matter that much in our case, but in future, when we will do mega project and then mini projects, then I will tell you why we need props, I mean must, why is it necessary to give us this and key. Props should always be completely unique, that is, all those things which are there, there will be a separate video on this in our series, then you will have a lot of fun. For now, just remember this, whenever you use the map method, you need to pass the props. Alright guys, so before ending the video, I want to show you one thing that I know, probably many of you still have these props, why I wrote props dot current element, maybe doubt may come and I don't want you to have any doubts at all. Also any doubt comes and if still anything then please comment I am always there for you right so I have given Kasol Dlog props here ok so guys you can see that when we open Kasol Dlog you will get The current element is visible in this manner, this is whenever you are passing the props, okay I mean, if you are doing console, then in that we have this current element and you can see very clearly that here we have this manner. Data is Cast Description Genre ID Image This is that and here we have this key which is currently visible to you as undefined, okay but it's fine so we have current element and then we have this key so you do n't have to take so much tension right now You know, I have already told you, we are going to see it very well in the end, but for now, look at the current element, props, current element, cast, do you understand what I am saying, so here we have a props, you know. In this way dot current element dot then cast description genre ID image name rating I can write anything, so in this way I was writing props d current element d a then props d key I can write whatever I want, currently I need data. Not getting his but it's fine not a big deal okay so ya this was your props so ya guys this is it that's it for today's video I will now tell you about swear deconstructing in tomorrow's video and I think That's a great need of a separate video, separate one is ok so ya this is it today, that's all I came for this video, I really hope you would have liked the video very much, guy let me know in the comment section that this is working properly. Whether it is there or not and if you have any doubt, you can comment below. I am providing you the source code for free, so please check it out, but do not leave with just the source code. Guys, please also like the video. I am working so hard for you guys, one like is enough, so you can give it, all you have to do is click, comment, share with your friends, the next target is 1 million subscribers, so now. If you have n't subscribed till then please do so, I'll see you in the next video till then guy thank you so much take care [music]