hi guys in this blog we are going to learn how to create our own methods because you can see that we are just injecting a new method this event metal on change in our render method we're gonna just extract this one and we are going to create a new method in here I also refractor some codes in our in here and also teach what this key word means in here so first of all because we're just gonna create to create our own method so first of all we were just gonna grab this one as we need in our own methods so in here what we're gonna do we are gonna just use this dot handle change this is what we need yeah this is what we need and just call handle change and use arrow method in here I'm also going to teach why why we can't use this one and that's why we are gonna use this handle change arrow matter in here and the argument is only one e that's for event and now in here what we're gonna return we're gonna redo to return this steady state that's what we're gonna return and if you just save it and go to our code and just type in here we haven't got yeah we have got the country's now in here just type in Germany you can see the same working flow is going on no I have a tool that we can't use yes before yes sick symbol in here that's because if we just write in here like this and just save it you can see that too it's given us just a second yeah just type in here you because it's an parameter and if you just look into here and just type in here it's not gonna return anything yeah it's not doing anything in here and you can see yeah it's given an error this this is undefined what's that because this app constant this app component has no idea about this keyword in here that's why because this is this what is this this is a very tricky concept in any language this is a keyword special keyword which is used for a context that you are referring to what that what's that mean it means that in here you can see that we got this context from react got component when he we have used super like if we just comment out coming in this super method you can see it doesn't it has no idea what this means in here so that's why this is context to it react dot component and in here you can say that we haven't used the arrow metal but it's working right was that because the component did mount method is belongs to react that company so it knows what this keyword is referring to but we have made our own method handle change and it has no idea what this keyword is referring to that's why we have used the arrow method such that arrow method gives the flexibility to the goal that it knows that this keyword is what it is what class this refers to so I recommend to use this now in some code you can see that before this code you can see that some place you can use like this if you're gonna use this type of syntax if you're gonna just remove it and use this type of syntax for this you have to write this dot handle chains dot find this and if you just save it and go to our code and just use Berlin or Berlin is not a countryman benning yeah we got so in here you can see that it works but whenever like we're going to create a new methods a bunch of matches you're gonna write you have to write these code again and again so better to just remove it and use the arrow matter right that's what I recommend to now in this blog we have learned this keyword means and we have created our own method yeah and some more refractor to do man yeah what we can do just save it and in here in our search box we don't have to use this props always you can also again because you know that the props is an object so just extract the values from the from what from the props object so just use placeholder and just use handle change and just remove these props so it will looks nice and you can say that it's a advanced level of understanding now the one thing is done I haven't added this CSS of it okay in the next blog I'm going to edit now in here you can also use we have used the props in here you can use the same thing in here stats no you don't have to give these stats in here this is fine and in our country I'm just going to remove the CSS we don't need it and in our country dot J's we have again the props so I'm just gonna remove it and use the stats and in here I'm just gonna use remove the stats from any place that you can see okay it's redundant to use prop start again and again right you can also go one more further but that's for that's fine by now so just remove it just remove it yeah almost done yeah that's it we have done all right yeah okay AB dot CSS John search box isn't raining yeah okay yeah all right we have done it we have created our almost app you can say now just go to your browser and you can see that we got the same thing no tension now just use anything you know it's doing good yeah now in the next blog I'm going to just use some CSS to look exactly like this one and in the next blog also we're gonna deploy our app into products Thanks