hi guys in this blog we're gonna definitely start building our app so first of all we want the country's data so in here I'm going to use this API for getting all the data of the countries so I have created one state and have property called countries in in it's an area because that's where we're gonna store it and there is component in mount matter that is given by reactor component and these methods are life cycle methods there are other methods also like dude update you will mount will unmount so these are called lifecycle methods because these are methods gonna get run whenever the whenever a certain point of time and if we just hold on the component in mount it's give the definition that it will be immediately called after a component is mounted so in here what we're gonna do we're gonna fetch the contents or data of the countries and I'm going to use I think a bit syntax so in here I'm going to get the response and use the await syntax and use the fetch native API call in here I'm going to just give the URL and I'm going to again get the country's data from here and use the await and response Tod Jason this is what means like it is going to fulfill the promise and it will return the countries now after that we're gonna just set the state and you can use simple countries like this and it will be saved to the countries variable now this is a JavaScript flexibility syntax in here you can see and if you know JavaScript then you probably know what I have done in here now what's next to be a what's next is we're gonna adjust for each country we wanna get the data of chronic cases now in here again we are gonna use Const Oh once again we're gonna use this dot state dot countries because from each country we're gonna get result of the country states so I'm going to save in two states stats in here you're gonna use for each matter so that we can go to each element and use the fetch method again now it will be again a synchronous process so that's why I'm going to use a sink now in here what we're gonna use we're gonna use cons to response because we're gonna get a gain response and you're gonna use the await and fetch into French fetch method or just sick yeah I'm just going to copy it again because like I haven't copied before that's why now it will be a string interpolation syntax in here so I'm just going to use this JavaScript syntax now in here I'm just going to use country dot slug now in here where did it go okay just a sec in our company did mount if you just go into your company did mount I'm just going to run it and just comment out this line and just run it and in here you can see that we got all the countries in in here and I'm going to use this property slug in here so that's why I'm I have you slug in here just comment out again now from here what we get we get data again wait and use response to Jason so it will be fulfilled and return the data now I'm going to show one new syntax way to use steady state whenever you're gonna use the data to set the state to the same properties in in here because it's an area but in here what we get we got one element or one country's data but we want all the country's data and it will be set one by one one by one so in here just use the syntax in here properly previous state you can use any name in here in here it's just a callback function you can say and I have used a previous state that means this previous state you can say that whenever this function gonna run this previous state will be the state of the previous state has been set just you can know what I have told ya now do the same thing that we have used we're gonna use a curly braces and I'm going to set in the stats and use the previous state dot stats dot concat just to pose the element that what we're gonna push now in here we're gonna push data but as you know the data is already a array but you can say that the last element of this array is what we want is the latest data you can say now for this I'm going to select the last data for this one we can use data dot length minus 1 that's it yeah this is what we want now I'm just going to save it and you can just look into your react developer tools and you can see we got States but you can see there is some properties have undefined well what's the problem in him in here so you can use your JavaScript mind and just know what's terror because if you just okay just to use what the array in here you can say that the data we have got is nothing it's like an empty area so that's why it's giving the error because there are some countries like I have also already used this one Christmas Island and you got nothing you got none data any in here it doesn't give any fair response but it doesn't give any data so there are some countries that gives no data so that's why before running this this starts state steady state we're just gonna check for data dot length now if we just save it and look again into a browser and go to our state's you can see that we got the perfect we got the data yeah that's what we want now in our this render method we're gonna so this we're first gonna show only the country name so how can we do that we can do that by using curly braces as you know that after using curly braces you can write JavaScript syntax and you can write JavaScript syntax using this start and you can use and after that this state dot States dot map because we are mapping or we're gonna return some GSX in text from here such that we can so the name of the country now just use it country and for now we're just gonna give h1 tag and use again JavaScript syntax for showing the country name in in here dot country and if we just look in doing here profit we got the country name in in here but again there is one problem which we will see at the later point of time but yeah for now that says ok so in this blog we have learned what we all learned we have learned that we have states of countries and stats we have used the fetch API and using a weight matter which can be very where we I recommend to use because this is so under student that you can understand everything that first of all we have faced a response it's gonna return the countries it's gonna set the state and for each country we have again first response again get the data and in here we have used another method another syntax for setting the state and we can check that if the data length is 0 or minus 0 or greater than 0 that's this this is and we have also used the curly braces and inside a curly braces we have used the syntax JavaScript syntax and also JSX so yeah this is what we have done in the next blog we are gonna see more of this app thank you