hi guys in this blog we're gonna start building our app more and in this blog we're gonna build our search box component so that we can use this component in any place that we want so back to code in here I have already created one folder search box and two files inside the search box CSS for styling and such packages when I'm gonna write the code so import what we are going to import import same thing importantly a crumb react now in here it's gonna get con search box it's again a functional component and we're gonna use the functional es6 syntax in here what we're gonna return we're gonna return the input tag and in here the type activity will be a search and the class name which we're gonna provide later is search and in here the placeholder is gonna be dynamic because this is this component can can be used in any place that you want and the on change method the same as the on click method that you have seen it's an unchanged method and for now you can just write like this and just use it and just close this input tag and just export default search box now in here what we're gonna return we're gonna return the props yeah right knowing AB dodges we're gonna import search box from dark slacks component search box search box now in here search box in search box what we have attributes attributes are placeholder in placeholder for now we have just given enter country name right and there is one more method in here on change method now for here for here we are gonna just provide the props that one that you have given the placeholder and in here we can just give props thought handle change because it's an function and we're gonna write the function in here right in Abdo GS so in here handle change handle chain in here we're gonna write an anonymous function and we're gonna just see what it is so for now in here just use e that's for event because we are changing something and just for now just console dot log this e right now just go to your code and you can see that we got the search box and just open the console log just console and in here just type in something like a and you can see that you we are getting some event call in here and we got one object that we are consulting in here so the main takeaway from here that it is it's an event and whenever we trigger whenever we change something on this search box it's gonna trigger one change it's gonna create one object and the main takeaway is this target from the target we were gonna get the values of the you can say the lecture that we're gonna get so in here the console dot log just use a console that log event or either target dot value yeah that's one and just go to your browser and just call s d you can see that whenever I change something it's going to give the whole lectures now this is what we need yeah that's all now one thing moon is gonna that we are gonna filter out the contents of this countries now in here first of all we're gonna say it the state or we're gonna create one new state in here and let's say its name is search field now what it's gonna do in here not not only we're gonna just console it we're gonna just going to set the state in here and what we're gonna say they state with the search world and with the e dot target charge value that's what we want and if you just select it or just save it and go to our components and in here okay just a sec yeah we got the components and in here we're just going to type in here something d/f JKL you can see that the same thing is changing in here search field now this is what we have done in this blog and one more thing with what we are gonna do we're gonna just the Seth I use the filter matter and that's how we're gonna filter out the countries in here so after ranger matter what we're gonna do we're gonna use create a new variable Const filtered countries and in here you guys are not just provide the this start state or there is one more syntax that I'm going to teach the object extraction yeah you can say that they start state if you know that it's gonna extract the properties from this dot instead because it's an object so what we're gonna get we're gonna get what we want also we want stats and we want search field yeah that's it we got those stats and search will and in here stat start filter we're gonna use the filter Metairie in here and the countries are just type in country and in here this is the sort symbol for return you can use this symbol as return now in here it's gonna return the country dot country dot to lowercase dot includes includes what into a search field dot to lower case that's what we want right now in here it's not gonna return the exact that we want so in here we're just not gonna give total stats we're gonna just return filtered countries in here now if you just save it and go to our browser and just use any country America you can see it's selecting it's filtering out our component yeah that's what we want so you can say that - we have - almost an hour project just do some styling and do more refracting to our code and that's all we done in our next blog Thanks