Create a Currency Converter with React and Material-UI

foreign [Music] and welcome back so today we are going to be building currency converter app and as you can see this is the final project really clean of course and as you can see here we have uh three input field the first is the tax input field here and also the from as you can see it is the select and also we have the switch button and also this two which is the select as well so let me show you here if I do one amount here it should be converted one USD which is from here okay and then two a u d which is Australia currency okay so we have the result here of course we can change that by just remove that and we can typing for example India or Indonesia you can type in here and you get the result here and of course this one here will work right we can click the Switch button here and it should be converted from one one e and r which is India currency into the USD all right we can also change this whatever you want everything it should be work okay that's pretty cool guys and of course this will be responsive as well if I open in a mobile it should be a look like that and it should be still working all right we can switch that it's pretty cool and yeah that's what we are gonna be building hope you like it let's get started before before we write some code I just want to show you what the technology we are going to use for this project so we are going to use fit to generate react application you are going to use mui for UI Library we are going to use this pure CSS Guardian from code pen IO here as you can see the background I grab from here to have this beautiful background animation and also I'm going to use this box Shadow to generate shadow in this box here and also for the API for all of this list of country here I grab from rest countries okay and also for the currency converter I using this API which is free currency api.com I put all the link in the description so first you what you have to do is just go to this frequency API Android account here okay so after you create account we have already to create the project so let's get started so let's open on a terminal and I'm going to create folder called let's say XE currency okay you can give any name you want and I'm going to CD into the XE currency so let's say XE Dash currency like that so in here I'm going to open that into Visual Studio code so I can say code Dot and we have resource three code open in here okay so the first thing is I'm going to generate react application so let's do that here I'm going to open the feed here let's go to get start and I'm going to copy this command here so let's copy that and paste start in here which is npm create feed at letters okay we're going to generate direct application in the current folder so we can say dot slash and then I'm going to say enter here so let's select react and then I'm going to use JavaScript and we can say npm install to install all the dependency all right after it's done we should have this node models folder and now we can type in npm run Dev to basically run the app in localhost 5173 okay this is what we have in the first time and then next we are going to uh install the material UI so let's go to the installation here and I'm I'm using npm so I can copy all this command and here I'm going to open another terminal and I'm going to paste that in here okay we install the mui material emotional react and also emotion style all right it's done and the next thing we need to install is let's go down here and we need to we're not going to use style components so let's skip this we are going to use this robot to phone so let's copy that and paste our in here okay and also we are going to copy this import stuff Import phone here so let's go to the main.jsx and we are going to paste the font right here all right let's save that and I'm going to close this terminal here and let's go to the app.jsx and I'm going to remove inside the div here all the content and I just want to try so let's do button okay this button should become from the mui right so I'm going to say click here so I just want to see it's working or not so let's go back and as you can see this is the button and it's working so let's go back here let's remove a couple things that we don't need let's go to app CSS here remove all of that and also I'm going to remove the asset here so let's delete that so let's remove this div here and I'm going to use container so let's do container come from mui slash material and also the classic tag closing tags as well here all right so I'm going to add styling so I can say SX you can add styling in mui component with SX props here okay so we can say background for example I'm going to change that to let's do gray color so if I save it should be like that that's because in our index CSS here we still have this styling so let's remove all of that and now we have this container okay it's working perfectly nice but I'm going to change the maximal width into medium so let's go back here and I'm going to do maximal width I'm going to set it in equals to medium so when I save this and as you can see it's more small all right we have the medium container here it's working and I'm gonna remove this button and I'm gonna use typography so let's do typography and I'm going to put the text here so let's do stay ahead with accurate let's do a great conversions all right so we have this text here okay we cannot see because the background is gray now so I'm going to change that to Let's do fdfdfd and it should be white now all right so what we need to do next is let's add the variant here so the Varian I want to change that to heading 5 and also I'm going to add a margin top so I can say SX and here I can say margin top okay so you can write CSS in SX here but you have to make sure everything should be comma case so I'm going to do margin top to ram save and this is what we have right so now I'm going to create far column in here so I'm going to use grid so let's do that here so I'm going to say grid and this grid here it should be container so let's do container to true and inside this grid I have for item so we can say great then we can specify this should be the item okay we can say like that and let's do item here let's say item and now we should have this item here okay so if you want to add spacing you can do spacing here let's do two and we we should have this space all right and basically I'm going to put all of this style here into another component so let's do inside the source I'm going to create another component let's do folder first let's say components and then set this components folder I'm going to create file let's do input amount.js let's do error fce and I'm going to copy and paste this grid item here so let's cut that out and put that in here okay and we are going to import this input mod and use that right here so we can say input amount just make sure we import up here okay and we are going to close this stack like so and we are going to create another component here let's call that and I'm going to do select to select country okay select entry.jsx let's do ifce and also we are going to paste the grid item here so let's go back discrete item here I'm going to cut that out and put the here all right so now let's do here the select country like so and also another thing it should be the switch currency which is the button so I'm going to do switch currency .jsx let's do rfce and again here we are going to copy this thing here and paste that in here okay and we are going to uh import this switch currency in this app here so let's do let's go switch currency like so also the last thing it should be the select country so let's copy that and paste that in here okay we should have the same thing here have some problems let's go to inspect go to console as you can see grid is not defined all right that's because we don't yet import that let's import this grid here like so all right so let's make sure we save that and it should be work all right so now let's go back to input Mount here and I'm going to instead of just text item we need to render text field here so I'm going to do tax field okay this comes from mui material and in here I'm going to let's send couple props in here so the first thing is the level I'm going to say amount here so let's do Mount and also I'm going to set the full width to true and let's add the input props just make sure the IE should be uppercase okay so inside the input props I want to set the type it should be a number okay so when I save that we should have this field okay nice and I'm going to add the icon in here so the icon should be dollar icon so we can add the icon with star and Dorman so we can say star and Dorman okay and we are going to put the let's say input environment here and I'm going to put the dollar icon and the position it should be start so we can say position and then I'm going to say start so as you can see now we have this icon all right that's pretty cool I want to have space in here so instead of margin top I'm going to change that to margin bottom I think let's remove this top and change that to margin bottom and here we go so next let's working with the select country component so let's go back here and I'm gonna use autocomplete come from mui so let's go back and I'm going to open the components and go to autocomplete so basically I'm going to use this disable clearable so that's because when I remove this and I click another just outside of the input field here I click that it should be still select the last value that's what I want so let's scroll down and click this show the source and I'm going to use this this one here okay let's go back here and what I'm going to do is let's say how to complete like that and inside in here you need to send couple things so the first thing is I'm going to say option so the option is basically array with couple of value summer to option one let's say option one and then let's say option two all right and also down here we are going to render the input so we can say render input so let's say set equals to and here I'm going to grab the params let's do params and here I'm going to use text field so let's say X field right text field and inside this text field I'm going to render all the param so let's do params with three dots okay and also here the label I'm gonna say let's do from okay so when I save this and as you can see we should be able to see the select field here and of course we can set the default value so let's go back here and I'm gonna set the value so let's set that to I'm going to do option one for now so let's do that and now we have this option one so I'm going to change the width here so let's do that here I'm going to set the extra small into 12 okay so now we are going to see this select field it should be 100 width so we are going to change into the input amount as well so let's do for extra small I'm going to change that to 12 okay so that's mean it should be 100 width I can also change that with 6 if you want to see like 50 percent okay but I'm going to say 12 percent not 12 but 100 for the mobile devices all right so now let's working with the this item here which is at the switch currency so in here I'm going to remove this item and we are going to render a button so let's do button and this button here is basically half icon inside in here so the first thing is we need to install the icon so let's go back to installation let's go to installation and I'm going to install this icon here okay the mui is less icon that's material let's go back and I'm going to paste that in here and hit enter let's go to Icon here so let's say icons and we are going to see all the icon inside the material icons here okay and we are going to grab the compare so let's do compare compare which is this one here this icon here so I can click this one here just copy that out and let's go back here and I'm going to paste that in here so now we can use the icon here so let's copy that and paste that in here get icon should be component let's do it like so now if I save that and let's take a look it's not working that's because we don't yet run the server so let's do npm run Dev and here we go we have this icon really cool so let's start link that a little bit and the first thing is I'm going to styling the button so in this button I'm going to do styling and in here I'm going to add the Border radius to 1 and also I'm gonna do the Hague the hake I'm going to set that to let's say 100 and what else we need to do is inside this compare a row icon I'm going to add style let's do extra XXX and in here I'm going to do font size let's say font size I'm gonna put 3D okay so it's more bigger and there we go so now let's make it responsive I'm going to reset the zoom in here and for the switch currency for the extra small I'm going to set that to 12 which is 100 and for the medium I want to set that to Auto so let's do auto here and for the let's go to select country for the medium and more I'm going to set that to let's do three three column okay so let's save and let's take a look what we have here all right we have three column here and for the mount for the mount here let's just say MD this is will be fill all the available space in this column so we know this is going to be the three column it's going to be three columns this is Auto and this is going to be fill all the available space in this column here so now let's see in the small device it's going to be a look like that and on the large device it's going to be like like that okay I think that's pretty cool so now let's working with the box so let's go back to app.jsx here which is we are gonna styling this container here first I'm going to create a variable called let's do box styles okay that equals to object and basically I'm going to copy this background and paste that in here all right so let's remove this object here and I'm going to put the Box style in here so let's do pop styles and I'm going to do a couple styling in here so let's make it small and like so all right so I'm going to text align so let's say text align into Center you'll be centering this text and this icon as well and also we are going to change the color into let's just do 22 and also I'm going to do Min hake minhake I want to set that to that's it 20 RAM and also for the Border radius order you cannot see it because let's change that to Red first so the butter radius let me save that first so the Border radius which is the right here okay I'm gonna set that to let's do border radius okay I'm gonna set that to let's see two and as you can see it's immediately change and also I want to say that the padding the padding here I'm gonna set that to 4 Ram top and bottom and two Ram left and right all right it's gonna be look like that and also for the box shadow let's do box Shadow I'm going to grab shadow from the let's go back here the Box shadow.dev and I'm going to copy this code here so let's copy this one here and let's go back and I'm going to put that here just like that and also the last thing is I want to set the position into a relative as a relative like that so now let's take a look what we have here you can see of course we need to change the background to fdfd like that and it should be like this all right and I'm going to add margin top I think here so let's do margin top into I'm gonna set that to let's say 10 Ram and I save it should be right here okay so next I'm going to change the background of the body here so let's go to index and I'm going to just copy and paste this uh background gradient here so let's just copy the CSS and I'm going to put that here okay it's basically will styling the body tag and give the keyframe gradient okay so let's save that and let's take a look here and this is what we have as you can see that's pretty nice and I hope you still follow along this tutorial guys because now we are going to get the data from the API the first thing is we are going to get the data from this rest countries API so I'm going to grab this all country okay this one here so if I copy that and paste that in here if I hit enter we should see all the respawn here all right so I want to copy that so I'm going to use uh use x here specifically so I'm going to create folder called hooks okay and in here I'm gonna create a file called let's say use axios.jsx all right and let's do our rfce and in here what I'm gonna do first is let's install axios we can see npm install axios Okay after it's done let's run the app again npm run Def and what we need to do here is I'm going to create state so let's first say data and let's do set data so that equals to use state by default it should be empty array and I'm going to copy paste this couple time and this is going to be the error so let's do error and also set error and also this is going to be half value null for the first time and also load it so let's say load it and also set loaded all right so the first time is going to be false like so alright so down here we are going to return all the state values so the first thing is data and error and also loaded so inside it here I'm going to create a user fact okay we are going to fast data inside the user effect let's do use effect and we are going to run this user effect every time the URL change let's say URL and this URL is basically come from this bottoms here so let's do URL all right so inside this juice effect I'm going to do let's create a function call fetch data okay set equals to I'm going to use async awit function so I'm going to do a sync and then error function here and I'm going to do try and catch so let's do a try catch they grab the error and then down here I'm gonna say finally okay just to finally like so all right so in this try here I'm going to set the loaded into true okay and then we are going to cons response we are going to await all right for axios and we grab the URL here all right and also down here we are going to set the data into response dot data like so and also down here if something wrong happened we will set the error into error all right and also finally we need to set the loaded into false okay back to false all right so down here we need to run the fetch data function just like that right so now we can be able to use this use axios hooks in our app so let's remove this and basically I'm going to fetch the data inside the select country component so what I'm going to do here so let's grab the data so let's do data set equals to use axios okay and I'm gonna grab the link here and put that here okay so now I'm going to console log the data okay so when I save and let's go back here let's open the console and we should see this array with 250 data all right so now let's go back to select country component and what I'm going to do here so first I'm going to create variable call let's do data filter let's say data filter set equals to I'm going to do data dot filter I'm going to filter the data uh let's say item and I'm gonna say currency okay that's because as you can see here let me showing you uh this key where's the currency oh let me see this currency here right not all the array here have a key currency inside this object okay so that's why we need to filter that out so I'm going to say currency in item all right just like that so when I console off the data filter right so let's refresh and as you can see we have two four seven remember the first time we get the data we have 250 right so that's why we need to filter the currency okay so now what I'm gonna do let's create another variable so let's say cons I'm going to say data on trees let's let's remove this B why the B right there data country is set it equals to I want to say data filter yeah I'm going to say.map and we grab the individual item it should be map here we grab the individual item and down here I'm going to return string so I'm going to do return and I'm going to use back tick here and I'm gonna put the item dot flag okay because as you can see here in the console we can access the flag here okay we have this icon here all right I hope you can see it and also we are going to use the let me see the currency here okay we are gonna grab this key in this object yes in this currency object we are going to grab the key here okay how do we do that we can use object so you can say object dot Keys okay we grab the item let's say item dot currencies and we grab the first value here the first value is going to be this one and also I'm gonna grab the name of the country so I can say I'm going to do strip and I'm going to do item dot name dot command name and then command all right so now I'm Gonna Save that and let's try to console log so console log let's just copy that and paste out of here all right so now I'm going to refresh here let's make it small I think let's do that I'm going to refresh and as you can see we have some warning here cannot Comfort under fun and Define or null to object so what happened here that is because this array 0 here is should be outside at this object keys so we can put it right here all right so now as you can see we have all of this value with flag and then the code of the currency and the name of the country all right we have all this value really cool so now we can put all of this value here into the option so let's go back here and I'm going to copy and paste that in here okay this option here so let's put that in here all right so when I save and let's close this console when I click this as you can see we have all of this value all right that's pretty cool but as you can see the first value is option one just ignore that for now so another thing we need to handle now is the loading so let's go back here and I'm gonna back to my you use axios and basically we are going to grab this loaded and this error so let's go back to select country we are going to grab the loaded and also the error all right so here I'm gonna do if the law that is true I'm going to return all right let's just return grid here this one here we need to copy that and put it here all right and inside in here we are going to render scale items so we can see a skeleton it's come from mui and also here I'm going to set the farion into let's say round it okay and also I'm going to do the hake the hake I'm gonna set that to let's say 60. all right if I save and as you can see after couple seconds it should be showing the loading but you cannot see it so let's try to set the true here and as you can see we have this loading skeleton all right so let's remove the true put the loaded here and I'm going to add another condition which is if the error is have a value we need to do something in here so let's say return and then I'm gonna say something when wrong just like that right so let's save and I think everything will look perfectly nice now let's remove this console and as you can see this value is always option one so if I click the for example let's say Norway if I click that as you can see it's still got this option one so we need to fix that so you can create state in here but remember we have two spirit file here the from and then two okay so we need to basically have to state from the from and for the two okay so we need to handle the state inside the app here so I'm gonna do let's do up here I'm gonna say cons let's give a name from currency and set from currency okay set equals to EU State let's just do empty string for now and I'm gonna copy and paste this and this is going to be the two currency and set to currency all right so we are going to send this value to this select country so I'm gonna do value set equals to from count from currency and set value set equals to set from currency all right and let's copy this and put that here we start in here all right so instead of from currency we need to use two currency here so let's do two currency and for the function it should be set to currency as well and also we are going to send the level so let's do a level this one is going to be from and this one is gonna be two so let's say a level and I'm gonna say two all right so now let's go back to cell account three and we are gonna grab the props here and I'm going to grab the let's do cons set equals to uh props okay I'm going to distract ring the value the set value and also the level okay and now I'm going to send this level to this variable here okay I'm going to remove that and paste the label right here set equals to level so when I save that as you can see it's going to be from and it's gonna be two all right and also I'm going to change this value into value come from the props we can say value and also for the ontings we are going to handle that so let's do on Chains set equals 2 is going to be function here I'm going to write the function in here so first we grab the event and then we grab the new value all right so in here I'm going to add the function let's do error function and I'm just I'm going to do set value and put the new value in here okay just like that now if I save and let's grab the from cutter and two here I'm gonna grab the Zimbabwe okay everything is working right before we working with the free currency API what we need to do now is I'm going to create context API so we have the global state to store all the state we have right so first I'm going to create folder called contacts inside this context let's just close everything first inside this context I'm going to create a file called let's do parentheses contacts okay dot jsx and in here I'm going to do rfce and I'm going to change the component name let's do currency profiler all right and we are going to grab the children here let's say children and also I'm gonna put the children right here let's say children right so first I'm gonna do is create the let's export variable call I'm gonna say currency context okay that equals to create context it's going to become from react and also on here I'm going to wrap these children with currency contacts dot provider so let's do currency contacts Dot fighter and also we need to closing tag which is currency contacts dot provider as well so in here we need to send the value so let's do values set equals to Value let's create a value so I'm going to do cons value set equals to object okay so let's format the document so you can see clearly here and the first thing I'm going to do is let's create a state I'm going to copy all this state and put the here like that and inside this value I'm going to send the from currency I'm going to send the set from currency I'm gonna send that to currency everything basically right here all right copy that paste that in here wait copy that and paste that in here so to use this context API is pretty simple so first let's go to main.jsx and what we need to do is I'm going to wrap this app with currency contacts all right not currency context but currency provider just like that let's put this app inside of this currency provider just like that now this app will be coming the children right here all right so now let's go back to app here and we we can access the state here so we can say cons and then object here and I'm going to set equals to use context right and we are going to use context the name context should be currency contacts remember we have the currency context right here okay we export that here so we can use that here okay so now in here we can grab all the value so I'm going to copy that and paste right here so I don't need use this state here so let's remove that and remove this Hue State as well let's remove this button as well okay so when I save that and it should be still working just something wrong guys happen so let's see in the console uh let's see used it is not defined so let's go back to currency contacts because we don't yet import the use date so when I save everything look perfectly fine so the warning here that's because we have the value so let me see here we have this value here the value in the first time is empty string that's because we have some warning so to fix that warning we can I just want to console up first console log data okay and we are going to let's see what the data I think I'm going to console lock the data countries let's talk on select data countries that and I'm going to refresh and the first thing I'm going to I'm going to looking for USD this one I'm gonna copy this all right copy that and I'm gonna put that as a default value in this from currency so I'm gonna put that here so basically I cannot find Australia so I'm going to copy and paste from my final project and paste that in to my contacts here so if I started here so now we should not see any error any warning in this console okay so everything will look perfectly nice let's remove the console lock here all right let's do that and everything will look really nice as you can see really clean here okay that's working perfectly fine so next I'm going to working with this switch button here when I click this I want to be able to switch this from and then to Value okay so let's go to switch currency and what I'm going to do here let's go to this button and I'm going to do on click event so when I click this function this button I'm going to run the handle switch function so let's create let's create this handle switch function so I'm going to do cons and I'll switch set equals to Arrow function and first we need to grab all the values we are going to copy this and paste that in here okay just make sure you import the use contacts and the currency contacts and from here we are going to set the from currency into to currency okay and down here we are going to set the to currency into from currency just like that okay it's pretty simple so now let's go back here when I click this as you can see it's changed all right that's pretty cool so let's go with Andorra here I want to switch that okay that's pretty nice all right so basically to disable clearable is not working so let's go back to select country and in here we are going to add the disable clearable so when I save that let's refresh okay when I click this and when I remove I click outside here we still get the value that's what I want okay everything will look fine wait why we can scroll down something wrong happened here so the problem is inside the index.css we set the Hague to 100 viewpigs so we need to remove that and everything look really nice all right so the last thing what we need to do is let's working with the frequency API all right so let's close everything so first let's go to the app.jsx and what I'm going to do here is I'm going to create the use effect okay let's say use effect and this use effect here is basically half a dependency and for this dependency we are going to put the first amount value we don't have yet so let's create that so I'm going to create the context here and let's add the another state and I'm going to call this first amount all right let's do set first amount and the value here it should be zero okay and of course we need to put that into the value so we can use that to our component let's copy that and paste that in here so now we can be able to use the first amount and set first amount into app let's do first amount and set first amount all right so the dependency of this use effect is basically the set amount the first amount the first amount is basically the value inside at this amount field I think we don't handle yet so let's go back to input amount right here and first I'm going to say cons and then let's do set equals to use context and I'm going to put the currency contacts here let's do that and what we are going to grab here is the first Mound and the set first amount okay and also here the value I'm going to set that to value set equals to first model and this one change I think on change it should be set equals to we are going to run the function here so I'm going to say set first amount E2 e dot Target plus two e dot Target dot value okay so let's go back here and I'm going to just make sure everything is work so I'm gonna do console log the first amount so let's go back to uh app here and I'm going to see in a console by typing something in here let's do that as you can see we have the value all right cool but I think by default we should put the empty string because I don't want to see Zero here so let's go back here and remove the zero to empty string all right everything looked perfectly nice so let's go back to app here and inside this choose effect what I'm gonna do is first I'm gonna check if the first amount is half of value let's do first amount half of value I'm gonna do axios I'm going to get this link here so let's make it bigger so after you create account guys you can go to dashboard and this is basically your API key and let's basically go to documentation and I'm going to go to the letters X exchange rate and basically this is the request URL that we can use so let's put it here okay and we are going to send couple params in here so let's do params and object so we are going to send the API key plus two API key and the API key is basically this one don't use my API key guys use your own API key all right and I'm going to paste the base currency so let's do this currency it should be like USD like that and uh currencies so let's put currency and this is basically the two currency so for now I just want to say ETR which is Indonesian rupiah alright after we do that we need to handle the promise we can say dot then again we grab the response and then here I'm gonna set the let's create first the state so I'm going to do once let's give a name result currency okay and set result currency okay so that equals to use state by default I'm gonna set that to zero okay and let's put the function set result currency right here okay we are gonna set the third user currency into response dot data okay and if something wrong happen let's say catch I'm going to grab the error and in here I just want to let's say console lock the error all right just like that so now when I want to console log this we should be able to see the result so let's do result currency and let's go back here so if I change this amount to 1 for example as you can see we have this data here okay the data.data so we are going to access that so let's see data dot data and then we are going to access the IDR because we put IDR here we should put the IDR here so we can say IDR when I save and we are going to grab the value all right that's cool but of course we need to grab the value here the best currency and the currency come from the state here okay so we are going to create another variable here okay so let's say cons I'm going to say con from currency let's say from or NC sat equals to I'm going to grab the from currency and I'm going to say dot split okay because it's going to be let me showing you here so you can see what I mean so I'm gonna console up the code from currency let's save and last a clock here as you can see we have this black and a new SD the dash the United and state I'm going to grab the the second value in this array so I can say one here okay so when I say if we grab the USD so now we can put this code from currency to right here okay inside the base currency and also I'm gonna copy and paste this it's gonna be code to currency and it's gonna be to currency and everything looks same here and we are gonna put this code to currency in these currencies like so and remember we also need to put that right here just like that so now when I copy this and put it here the result currency let's refresh this and from I'm going to select the United State and the two here I'm going to select Indonesia okay so let's click that and for the amount let's do one United State which is one dollar it should be 4999 Indonesian rupiah okay it's working so let's go back here so what I'm going to do now is basically I'm showing the result currency into down here okay so let's scroll it down and still inside the container I'm gonna do checking first here if the first amount access okay I'm going to render this what else I just want to render nothing just empty string so I'm going to do a box here so let's do box come from mui material okay and inside this box here we have the typography so let's do typography and let's grab the first amount here let's say first amount and then space and I'm gonna grab the let's say from currency okay now I'm gonna do equals to and down here I'm going to say typography and here basically the result so I'm gonna put the result currency and I'm gonna put two currency here now when I save and let's take a look guys we have this one okay we have this result here so let's just dialing this a little bit so I'm going to installing this box let's say as X that equals to so the first thing is the text online I'm going to set that to laugh all right and also for the margin top I'm gonna do let's say one ram when I save okay it's gonna look like that and basically just for the result here I'm going to add the farion the safarian into heading 5 and also for the styling let's do SX and I'm gonna do margin top into let's say five Ram let's say 5 pixel and when I save maybe look like that and I'm gonna change the font size as well and the font size is gonna be uh Bolt not font size I think one week let's remove this and change start to on awake so let's save and here we go okay everything look really nice if I change the amount here to for example 10 as you can see nothing happened threw it to 100 nothing happened so what we need to do is let's go back to the app GSX and as you can see in the result currency here we need to times that by first amounts we can say first amount like that so now if I do one we have the value and when I do 10 we also have the value here when I do 100 we have the value as well all right it's working but if I click this switch here as you can see it's not working right so what we need to do is we need to add the dependency of this use effect here so we are going to put the from currency into this dependency let's do from currency and then we're gonna put the two currency as well and as you can see when I click this it should be changed get the value here then click that again it should be work when I change the from value I hope there will be work as well so I'm looking for house Australia let's see Australia this one I'm gonna click that and as you can see it's working if I click this one it's working as well so if I change that to America so let's do United State I think this one I'm going to click that and as you can see it's working all right guys I think we're done with this project hope you learned something new and then I'm really appreciate if you want to click the like and support me in this channel so thank you so much for watching see you in the very next video bye we forget something and that's really important so let's go back here and basically we need to put this API key into the environment variable so let's go to the root and we are going to create the EnV and I'm gonna do API underscore key all right set equals to and let's cut that out and put the here all right and we are gonna use the let's say import dot meta dot EnV dot beat because we're using fit right feed underscore API underscore key so basically in the feed we need to change this with fit as well so that we can say feed underscore API underscore key so let's try I'm gonna do three and it's still working guys so bye

Channel: Cand Dev

Views: 7,894

Keywords: ReactJS, Material-UI, useAxios Hook, Currency Converter, API Integration, Dynamic User Interface, Web Development, JavaScript, Restcountries API, Freecurrencyapi API, User Experience Design, Tutorial, Code Walkthrough, Web App Development, UI Design with React, Context API., react vite, how to integrate mui and react, Building Applications with React, how to use autoComplete mui, how to use Grid in mui, grid in mui, container in mui, background animation, switch currency app

Id: r8zwDzlNSsA

Length: 55min 34sec (3334 seconds)

Published: Wed Feb 01 2023