hi guys in this blog we're gonna build our own components as you can see this are the components in here this is a country company you can say and these are all bunch of country components and it was inside one wrapper component called country list component we're gonna see how it's built so far now back to code in here you can see that one thing more I have to do that whenever you go to your browser and check in your component real developer tools you can see that for each country you haven't got the country code because in the fuel in the next blog you can you can see that it is important to get the country code so how can we get the country code as you can know that for each countries in the country app in the countries you have the ISO - this is what country code means so I'm going to get the country code from this so how can we do that as you can know there is one concept or there's one console in the JavaScript called spreading operator if you know that's fine if you don't know just see first of all this is an object and we have wrapped around curly braces because it's an object if we if it's an error you have to use the square bracket but it's an object now you have to give three dots such that it will spread out all the consent content inside the Java in the object now in here you have to give what properties you have to like change so I have to change the country coding in here so just type in country country code and just set the value in here and we can use using country dot iso - yeah that's it that's how you can set the value now if you just save it and go to your browser mmm Texan yeah in here just go to sets and just select the one yeah in here you can see that we got the bank record yeah definitely perfectly now we're gonna create one components I've already created one folder called components inside the source folder because we're gonna learn in here how we're gonna build our own component just as apt Egeus has been built and using to our project so in components folder we are going to again create a new folder stirs that we have like it's it is a systematic way to create other developers can see what you have done and also build on upon it so you have to like you write a clean code and and use a like easy to debug that's why I'm building like a clean koenkan yeah now I'm going to create a new file and it's near a control list and just say it can't really start yes not to build not to give big name now just give import react from where such that we can view that's why we have you are going to use react and in here I'm going to use functional component in here not to build a class complaint now in here I'm going to return something but what we are gonna return we are gonna seal next and for not just gonna export it such that we can import it in the country in the app dot J's so in here you have - like import it so just imported import word import country list and brought list from where dots less complaints less control is less control list yeah and you don't have to give dot GS extension because it knows the editor knows what you are doing now I'm just going to remove it or just copy it and that's what we are gonna write in to our country list ideas in here I'm going to use countries or just use stats yeah stats is better and just select what we're gonna give it to it this all stirred starts yeah that's it now if you just save it and you can see this is an attribute and we are just assigning the all the data to a variable called stats now how can we get data that we have assigned to this country list component or this controls components so in here what we get is a props this is a props there are two things that you state and props and I'm going to differentiate between tools in later blog for now just look into it and this props is just like a state it's a JavaScript object now in here what we get we get these things now we don't have to write this because it's not a class so we have to remove it and in the place of states to start we're gonna use props in here and we just gonna write this one yeah yeah that's it yeah if just look into your project you can see we got the names yeah that's why yeah that's good now what we're gonna do like you can see that it's good but this is a country list oh there there is name naming problem yeah just changing to country list in here because after this we're gonna build country component not a pendulous component in here yeah that's good yeah that's good that's fine now in here this is a listing of countries you can say but we're gonna build each component has a country a country component in where we have image the name of the country in the description of the corona cases so for that purpose we have to build one more folder called country so that's what developers do man this reactor leper you have to know what how much you have to divide one company that's what really per do and that's what I'm doing in here so I'm going to just use country company country Dodgers and in here I'm going to use import react from react yeah and use the Const country and we are gonna use props in here yes you have to know this is how we can get data from other component no next what it is no next we're gonna just remove it but we don't need this right now what we need is import what import import country import country from where from dot dot slash country / country that's what we need I'll just check in yeah okay okay yeah in here what we're gonna give we're gonna give country and in country we're gonna give the state stats you can give your stats is what we're gonna give and what we're gonna do we're gonna give props country you just give it the configure this is what we're gonna give that's it yeah oh just one thing we have to export it also so just you export default country and in here just for check for right now we are gonna just give the props Rob start states dot country now just save it and save this also and just go to your project and you can see that we got the same thing well done perfect now in the console you can see there is one warning you can see and just always an warning whenever you gonna use map method inside a JSX so here you can see each child in a list should have a unique key prop what this means now in here this country you can see this is a country list but there are a bunch of countries are in in here so how can react distinguish between each country because these have similar component that's how that's the key comes into into the picture from the key the react knows what or which component have to change or rerender so that other components don't have to rerender so whenever the chance come whenever we have to modify one component and we don't have to modify another component that time we have to use or time react use the key attribute now in here in our country list we're gonna give key and for this perfect match will be the country dot country code right because each country have different country code that's why I'm going to use country in here now you can see that we don't have we haven't got any error yeah also you can see in the components you have like for each country you have the key and have such that the key can be used for the react thank you in this blog we have learned the component concepts in the next blog we're gonna just style our this components country list and country and it will look much better and it will be looked like this yeah thanks thank you