Build A Currency Converter In React

Поділитися
Вставка
  • Опубліковано 20 січ 2025

КОМЕНТАРІ • 294

  • @kharChehre
    @kharChehre 5 років тому +107

    Thank you Kyle for teaching us how to code & leaving your modeling career!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +48

      Modeling is overrated :P Programming is where its at.

    • @Adam-cn5ib
      @Adam-cn5ib 5 років тому +7

      @@WebDevSimplified woah you actually were a model? not surprised tho :O

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +40

      I was not. I wouldn't want to be either. It seems like a lot of travel and work, and programming is way more fun.

    • @pranav288
      @pranav288 3 роки тому +4

      @@WebDevSimplified nerd

    • @Scuffy
      @Scuffy 2 роки тому +1

      @@pranav288 ur mom

  • @byedwardleung
    @byedwardleung 4 роки тому +8

    Just started learning React and I find it much easier to learn by building these small projects :) Thanks, man!

    • @anthonygrear6226
      @anthonygrear6226 3 роки тому +3

      Yes, I think this is a good strategy. I just keep doing these small projects everyday- rather than slogging through a very long tutorial, book, or lesson.

    • @ssz6738
      @ssz6738 2 роки тому

      @@anthonygrear6226 12ewer

  • @mikemorrison8984
    @mikemorrison8984 4 роки тому +8

    Another excellent tutorial! Also, I took the "Learn React Today" course, and it too, is excellent.

  • @ifillup
    @ifillup 5 років тому +23

    React displays a warning as toAmount is NaN on the first render, changing the line 'toAmount = amount * exchangeRate;' to 'toAmount = amount * exchangeRate || 0;' is one way to fix it another would be setting an initial state to exchangeRate when calling the useState hook.

    • @AdityaRaj222
      @AdityaRaj222 4 роки тому

      Saved my life. Thank you and Kyle.

    • @parampampam4477
      @parampampam4477 4 роки тому +4

      Also there is a problem when chosen fromCurrency and toCurrency are the same (e.g "EUR' and "EUR'). My solution to it is to compare them in an 'if" statement like this:
      useEffect(() => {
      if (fromCurrency === toCurrency && fromCurrency != null) {
      setExchangeRate(1);
      } else if (fromCurrency != null && toCurrency != null) {
      fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)
      .then(response => response.json())
      .then(data => setExchangeRate(data.rates[toCurrency]));
      }
      }, [fromCurrency, toCurrency]);

    • @laplasparadox3138
      @laplasparadox3138 4 роки тому

      @@parampampam4477 bro l love u LOL l was trying so hard to get it this should be pinned!

  • @arturdeandrade7443
    @arturdeandrade7443 4 роки тому +17

    Your React videos are amazing! I'm definitely going to use them as a reference. I wonder if it would be possible for you to tell us more about the 'npm run build' command in the next one, maybe even deploy an app.

  • @shozdott
    @shozdott 5 років тому +1

    I'm sorry but you should have more followers , your the first person to ever simplify the empty array use effect thing clearly on the first shot .. well done gent :) the fact you said quote " Since an empty array never changes " opened it all up TY and cant wait to start buying your courses !

    • @WebDevSimplified
      @WebDevSimplified  5 років тому

      Thank you so much! I am really glad you enjoyed the video.

    • @GarronArgentina
      @GarronArgentina 5 років тому +1

      Check the video "React tutorial in 30 seconds" and you will save money and time! Check Federico Zacayan chanel in youtube.

  • @roydonk2878
    @roydonk2878 5 років тому +3

    Another amazing video. Lots of information clearly explained and is right to the point. I'm learning so much from you, thanks for the great content.

  • @shahriarparvezshuvo4760
    @shahriarparvezshuvo4760 4 роки тому +2

    Hey KYLE. Really appreciate your efforts. I've have been following your videos since you had like 10-12 videos on channel. Just I want to let you know that, I'm huge fan. I learned a lot from you. You are one of the best mentor, I've found on the internet.😻
    There is a tiny bug I found while following this tutorial. Let's say I was playing with currency USD to EURO, when I switch `toCurrency` to USD like it's now USD to USD. The conversion doesn't change. It stays with EURO amount while it shows USD to USD. I think, I fixed this with the one line of code: `if (toCurrency === fromCurrency) toAmount = fromAmount;`.
    That's being said. Keep up the good work 💪. Love from 🇧🇩 Bangladesh.

  • @bhargavjani7102
    @bhargavjani7102 3 роки тому +4

    At 14:04 , When I pass option as the key that way, I get the following error :
    Warning: Encountered two children with the same key, `EUR`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version.
    How can I solve this?

    • @morososaas3397
      @morososaas3397 3 роки тому

      Omit the base currency when we make the array of currencyOptions. This is because currency options include these days EUR as well. So it's not unique key anymore if you include the base in the array of currency options.

    • @Psychobellic
      @Psychobellic 3 роки тому +2

      get a index value as prop too (option, index) and assign the key={index}

  • @yodkwtf
    @yodkwtf 3 роки тому +23

    The currency converter APIs don't work the same anymore. They don't allow you to fetch data using the base currency. So just a heads up for anyone who starts the project now. You'll be wasting your time unless you find an API that allows you to fetch currency rates from a base currency for free. I tried to find one myself but it didn't lead to anything. Thanks, Kyle for the video tho but the PROJECT IS NOT GOING TO WORK ANYMORE.

    • @teliparth
      @teliparth 3 роки тому

      You just need to add api key in fetch ! It do work .

    • @yodkwtf
      @yodkwtf 3 роки тому

      @@teliparth ik I need API key to to fetch and it does work but only for the first fetch request when we're fetching data about all the currency rates. In the later half of the video we make another fetch call to get specific single conversion, for eg, INR to USD only. I'm talking about that part. That call isn't included in the free plan anymore.

    • @teliparth
      @teliparth 3 роки тому +1

      @@yodkwtf yeah you're right

    • @stafa5568
      @stafa5568 3 роки тому +2

      Thank you guys, I just experienced this and you're all right. Thanks for the update.

    • @yodkwtf
      @yodkwtf 3 роки тому +1

      @@stafa5568 np man. There is a work around to still complete this project. For me, that approach seemed a bit simpler too.

  • @efraimie6119
    @efraimie6119 4 роки тому

    Man you are amazing, clear and complete informations, also you have a lot of knowladge and skill making anything complex become simple. Keep going!

  • @jacobthedev4979
    @jacobthedev4979 2 роки тому +12

    Not sure if anyone else got the 'duplicate keys error'. But it happens at this line => setCurrencyOptions([data.base, ...Object.keys(data.rates)])
    here we set the first currency option to data.base. Doing this sets it to EUR, while still leaving the EUR option in the select drop down causing it to appear twice. edit the line to look like this => setCurrencyOptions([ ...Object.keys(data.rates)]) removing 'data.base' allows for only 1 instance of EUR to appear.

    • @the_yugandharr
      @the_yugandharr Рік тому

      This is because the you can't change the base currency anymore in 2023, they restricted that to the pro plans.

  • @developerweb3158
    @developerweb3158 Рік тому +1

    Thanks for the tutorial, I love how you explain concepts, you make it seems really easy.

    • @jinethhettiarachchi8744
      @jinethhettiarachchi8744 Рік тому

      Did you do correctly ... I was stuck in to get currency API ... it always ask key I don't know how solve it please help

  • @bobDotJS
    @bobDotJS 5 років тому

    Found Fix (ELIFECYCLE crash):
    I'm an Ubuntu daily driver kind of guy and immediately I had to jump through hoops to get the correct version of NPM (I had the nightly update version somehow). Once I rolled back to v12.16, I was able to "create-react-app ." BUT after following along up to 2:07 - and then "Failed at the react-currency-converter0.1.0 start script" - When reading the error log, it looks like getting rid of the ELIFECYCLE is causing it to crash.
    [Fix:] After almost 2 hours of playing around with this, I realized that I needed to run "npx create-react-app" and then immediately run "start npm" and then delete the assets/code WILE the server was running.
    Not sure why that happened or why this works but I did it side by side on my Windows Laptop and my Ubuntu laptop and the ubuntu laptop had the same error time and time again. Hopefully this comment can save somebody a lot of frustration.

  • @m.a.t.a.s
    @m.a.t.a.s 3 роки тому

    I like watching your tutorials and doing my program a bit differently. After some struggle, I made length converter instead with a local JSON table.

  • @JimmyCheng
    @JimmyCheng 5 років тому

    Man you've done a great job with these mini projects, really appreciate it.

  • @leerenae313
    @leerenae313 3 роки тому

    Thank you so much Kyle! your videos are so easy to follow. Thank you for making this free too!

  • @curtaslostark1583
    @curtaslostark1583 4 роки тому +1

    That was awesome! Great teaching, so clarifying, it helped a lot, thank you!

  • @nick.h7566
    @nick.h7566 5 років тому +1

    I'm just NEVER disappointed when I watch a WDS video! Kyle you are a Greek God, and whenever I hear the blues lick (That I'm pretty sure that beautiful lady in the back had something to do with) it gets me super amped to code! .....However it also gets me super amped to play my telecaster... damn you for these conflicting feelings! Much love dude!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому

      Thank you so much. The song was actually something I found online and decided to stick with since the very beginning.

    • @nick.h7566
      @nick.h7566 5 років тому

      @@WebDevSimplified Oh snap, I thought you recorded it.. Well she's a gorgeous guitar, hopefully you've tamed that mare!

  • @nativeKar
    @nativeKar 3 роки тому

    Kyle!!! I had asked a candidate a question very similar to this as part of a Frontend interview, and they ended up coding a solution which is a replica of this! I hope you get that 'Thank you' note from them.

  • @maskman4821
    @maskman4821 5 років тому +3

    I do enjoy this video, this gives me a rough idea about how react works, yeah, i will definitely check out your couurse !!!

  • @nuevouser2279
    @nuevouser2279 3 роки тому

    It is "just a basic little app" yet there is a lot to it! 😬
    Thank you for the great explanation!🙂

  • @SocksWithSandals
    @SocksWithSandals 5 років тому

    That was even more helpful than your ToDo list walkthrough.

    • @Algedibarrios
      @Algedibarrios 5 років тому

      He is improving his code, what about you spectator?

  • @leeyahav4754
    @leeyahav4754 4 роки тому

    this code was not easy for me at all to implement
    and you explained it amazing
    thnx Kyle

  • @mangekyousharingan5755
    @mangekyousharingan5755 5 років тому +1

    Dude, i just love you, thanks a lot.
    greetings from Brazil

    • @maskman4821
      @maskman4821 5 років тому

      you fall in love with Mr. Kyle ???

  • @georgettebeulah4427
    @georgettebeulah4427 5 років тому

    This make so much sense and can relate to it and understand what your saying and mean. Thank u

  • @centrumsaiyan7623
    @centrumsaiyan7623 5 років тому +1

    I'm gonna spend some time and create this project by myself. At the end, it's gonna be worth it.

  • @santespro
    @santespro 5 років тому +1

    Very helpful video. Keep making React tutorials

  • @milanddangol210
    @milanddangol210 3 роки тому +3

    Unhandled Rejection (TypeError): Cannot convert undefined or null to object. error in this line const firstCurrency = Object.keys(data.rates)[0];

  • @glebcherpovsky419
    @glebcherpovsky419 2 роки тому

    Perfect!!! Thank you very much for this explanation👏👏👏

  • @martinreed7831
    @martinreed7831 4 роки тому

    Thanks so much Kyle, you're an absolute coding legend!!! Great tutorial😁

  • @giuse7
    @giuse7 5 років тому +5

    Hey the app works for me but I get this error in the console:
    index.js:1 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
    in input (at CurrencyRow.js:13)
    in div (at CurrencyRow.js:12)
    in CurrencyRow (at App.js:66)
    in App (at src/index.js:5)

  • @joel_mathew
    @joel_mathew 3 роки тому +1

    Hey Kyle , I am one of your subscribers and I love your tutorials , one thing though the link for the API has been changed and I am not able to follow this tutorial if only you could just comment what all changes you need to make for the new link.

  • @armon_p
    @armon_p 4 роки тому

    Thanks for the video 👍. A bit of constructive criticism... Its tough understand the concepts while also keeping up in my editor at the pace you talk and switch files/sections. I'll be back for more tips!

  • @실험맨
    @실험맨 4 роки тому

    Very good video for beginners even korean can hear you.

  • @oluwatobifalola387
    @oluwatobifalola387 5 років тому +1

    Amazing video Kyle. Thank you very much. I have a question though. The rates only change when the base currency changes, why do we need to make an API request when the sub currency changes as well?

  • @rijupatra8689
    @rijupatra8689 4 роки тому

    you really make it simple ...do more react video

  • @soheebae213
    @soheebae213 4 роки тому +1

    Thank you Kyle for amazing video!! I was wondering where you get all of your api from?

  • @krishnam384
    @krishnam384 4 роки тому

    Explanation was excellent..!!

  • @mohammadhossein5065
    @mohammadhossein5065 2 роки тому

    thanks man this video helped me in my job

  • @Dipenparmar12
    @Dipenparmar12 4 роки тому

    This kind of small project is very useful to understand language/Library fundamentals.. 👍

  • @saurabhrana8040
    @saurabhrana8040 3 роки тому +3

    Kyle its give me an error..cannot read property 'AED' of undefined..
    how can i resolve it?

  • @omar_mtl
    @omar_mtl 5 років тому +3

    Thank you so much, please do a lotta react js apps

  • @pandirisuresh6920
    @pandirisuresh6920 3 роки тому +2

    Unhandled Rejection (TypeError): Cannot convert undefined or null to object

  • @OPopoola
    @OPopoola 4 роки тому

    Excellent tutorial. Thanks

  • @jaifranhernandez3901
    @jaifranhernandez3901 3 роки тому

    I'm getiing this error
    Line 15:39: 'data' is not defined no-undef
    On this section: setCurrencyOptions([data.base, ...Object.keys(data.rates)]) (app.js; line:15)

  • @raadzaa
    @raadzaa 4 роки тому

    Thank you for your good explanation!

  • @pradipbedre653
    @pradipbedre653 3 роки тому +2

    please do some modification code is not working, I do all as you do but still, it's showing error.
    finally, I copy all code from your repo but still, it's not working.

  • @pawanbhatta8973
    @pawanbhatta8973 3 роки тому +3

    I got an error while fetching, the api is asking for a key. don't have one 😕

    error: Object { code: 101, type: "missing_access_key", info: "You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]" }

    • @victorizquierdo5320
      @victorizquierdo5320 3 роки тому

      HI. You must register to get an API key, then set it as parte of URL base. The doc indicates how to do it.

  • @Saveli_Sh
    @Saveli_Sh 2 роки тому

    Thank you! It was really difficult to me, I did it in type script. And I had some trouble with the (api), I used Belarus API....But I won this task! Thank you from Belarus! I like your lessons!!!! Good luck!!!!

    • @ahsanzizan
      @ahsanzizan 2 роки тому

      can i get the url for the belarus api mate?

  • @HamzaBohari-g3g
    @HamzaBohari-g3g 2 місяці тому

    Thank you very well explained

  • @bardhan.abhirup
    @bardhan.abhirup 5 років тому

    Great lesson! Thanks a lot!

  • @kuldeepdawar7496
    @kuldeepdawar7496 3 роки тому

    Realy love it brother..Thanksss a lot..

  • @kiranez6095
    @kiranez6095 3 роки тому

    You are a living legend m8

  • @alvinacosta2312
    @alvinacosta2312 4 роки тому +1

    hey kyle, awesome video as usual! learned a lot from this tutorial but a bit overwhelmed at the same time. got one question though, as i was following the code with you, near the end of the tutorial i got this error which says "Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string."
    so i thought i did something wrong. but the program was working as expected. last thing i did to check was copy the entire code from github and tried it out but still having the same error. I'm baffled cause the program works but this error shows. any insight on this? thanks a lot and keep it up!

    • @mihiaissa1260
      @mihiaissa1260 4 роки тому +1

      change the line 'toAmount = amount * exchangeRate;' to 'toAmount = amount * exchangeRate || 0;'

  • @busrakara4929
    @busrakara4929 3 роки тому +2

    Hello, thank you for the amazing tutorial. But when I apply all of this, at the end I got an error : "Unhandled Rejection (TypeError): Cannot read property 'AED' of undefined
    " the currency type of AED cannot be read. I couldn't find the solution. A help is much appreciated !! Thanks.

    • @jasoneugene7697
      @jasoneugene7697 3 роки тому +5

      I just figured this out, on the 2nd useEffect change: fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`) to fetch(`${BASE_URL}&base=${fromCurrency}&symbols=${toCurrency}`) Because the API requires a KEY now, the URL already has the ? in the string, therefore when we added it in the fetch it gives an error. Changing the ? to & fixes the issue.

    • @busrakara4929
      @busrakara4929 3 роки тому +1

      Jason allmann thank you!

    • @carlosfedericovazquez9113
      @carlosfedericovazquez9113 3 роки тому

      @@jasoneugene7697 Hi Jason, Thanks for your help. I´ve done that and that´s fixed but now there is an error when i choose another currency than euro in fromCurrency. how can i fix that?

    • @jasoneugene7697
      @jasoneugene7697 3 роки тому +1

      @@carlosfedericovazquez9113 unfortunately you have to have a paid subscription for the api to change the base currency.

    • @carlosfedericovazquez9113
      @carlosfedericovazquez9113 3 роки тому

      @@jasoneugene7697 Ahhh, ok. Thanks so much for your reply!!! Greetings from Argentina

  • @sovietbot6708
    @sovietbot6708 3 роки тому

    Spelling isn't the issue. I get an error saying "Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'AED')" and the code in question is:
    useEffect(() => {
    if (fromCurrency != null && toCurrency != null){
    fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)
    .then(res => res.json())
    .then(data => setExchangeRate(data.rates[toCurrency]))
    }
    }, [fromCurrency, toCurrency])
    for some reason, the conditional isn't working.

  • @ramunasnognys5429
    @ramunasnognys5429 2 роки тому

    Greate tutorial! Only question where should I change decimal places with toFixed() method? Then I make this change exchangeRate const, app crashes.

  • @tanvimehta
    @tanvimehta 4 місяці тому

    how does the input box get those increament buttons on right side?

  • @Billy_98
    @Billy_98 5 років тому +2

    Thank you!

  • @MichaelMiller-rg6or
    @MichaelMiller-rg6or 3 роки тому +3

    Apparently the exchange rates API now requires an API key, I keep getting "You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]".

  • @digigoliath
    @digigoliath 5 років тому

    Thanks. I know it is going to be a great video!!

  • @prathameshmungekar8328
    @prathameshmungekar8328 4 роки тому

    I am getting following warnigns
    1)index.js:1 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
    2)react-dom.development.js:1383 The specified value "NaN" cannot be parsed, or is out of range.
    3)Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

  • @unknown1988s
    @unknown1988s 5 років тому

    Q : I have some lines of codes in my controller that i want to externalize to use as well for other controllers, should i create a file in a new folder called middlewares and then require that file to call the function inside my controllers ? thanks !

  • @oleksiikucherenko5881
    @oleksiikucherenko5881 2 роки тому

    Thanks for the video, it's just cool!

  • @Nathan-pu9um
    @Nathan-pu9um 4 роки тому

    Try this: Went through the video 3 x , 1st time Followed him through it and made it , 2nd time I watched it and took notes and tried to make it from the notes only, 3rd time make it without any notes from memory 👍

  • @kirillbaryba746
    @kirillbaryba746 5 років тому +1

    Thanks Kyle!

  • @adnanrazzaq19
    @adnanrazzaq19 4 роки тому

    Was it necessary to use another useEffect?

  • @volkanongun1112
    @volkanongun1112 5 років тому

    Thank you, great tutorial

  • @dimitridoroshko
    @dimitridoroshko 5 років тому +6

    Please, make* more React videos, thank you so much!!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +1

      I plan to. If you have any project ideas let me know.

    • @dimitridoroshko
      @dimitridoroshko 5 років тому

      @@WebDevSimplified how about a simple social network, it may turn into a series of videos. Should be useful :)

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +3

      I generally don't like to make long series of videos so I would probably stay away from a large project like this.

    • @dimitridoroshko
      @dimitridoroshko 5 років тому

      @@WebDevSimplified Build a movie search app using React (with hooks)

    • @warrior9096
      @warrior9096 5 років тому +1

      ​@@WebDevSimplified ​ Maybe a 'Home budget App' where you input revenue and spending. App also sums everything and save all in local storage...or generate some summary at the end of the month? It can be fun and useful :)

  • @leolima8585
    @leolima8585 5 років тому

    Do you video class for detection face (photo) inteligement in react native code? Type, smile or try? With aprovatiom of signup?

  • @tamjidhossain64
    @tamjidhossain64 2 роки тому

    Hello, I finished the video and whenever I change the fromCurrency, it does not change the values and the exchange rate remains the same for EUR rate. It works completely fine, however, when I change the toCurrency to a different currency.

  • @RokasZebrauskas
    @RokasZebrauskas 4 роки тому +1

    Why when I map through all the currencies, instead of them displaying one by one in the select , they all get joined together? Helpp

    • @rwiteshbera456
      @rwiteshbera456 3 роки тому

      You have missed spread operator in useEffect -> setCurrencyOptions([...Object.keys(data.rates)])

  • @ahmedalanany1184
    @ahmedalanany1184 5 років тому

    Hi kyle im getting . Cannot read property 'map' of undefined error. In the middle of the tutorial and i wrote the same code without any difference. So im Waiting your answer and thanks :)

  • @spsingh94ss
    @spsingh94ss 4 роки тому

    amazing video. thank you so much.

  • @relaxdebeats
    @relaxdebeats 4 роки тому

    Amazing video bro👍👍.

  • @therichardchannel
    @therichardchannel 3 роки тому

    How come when I expand the rates property of the object, it re-arranges to alphabetical in the console? But when I map it to the select, it's still how it was originally

  • @JimmyCheng
    @JimmyCheng 5 років тому

    could you plz explain the fetch in last part a bit, or if there's a video detailing the use of those symbols

    • @ekoydakoykoy
      @ekoydakoykoy 4 роки тому

      you can check it on the API (exchange rate IO)

  • @Drapeo
    @Drapeo 2 роки тому

    Hello, can someone tell me please where I can use toFixed() ?

  • @mixins_pixie
    @mixins_pixie 3 роки тому

    I get an error No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • @НаталіяТоцька-ж2у
    @НаталіяТоцька-ж2у 2 роки тому

    Hi! I tried to repeate this work, but I have mistake:"Variables fromAmount, toAmount are used before being assigned"

  • @bozkurt6264
    @bozkurt6264 5 років тому +1

    Thanks Thanks Thanks a lot for this project

  • @mohaTlg
    @mohaTlg 2 роки тому

    hello i have encoutered this problem: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
    I need the help

  • @tomweb7257
    @tomweb7257 5 років тому +1

    Great job keep going on

  • @sidduaufroze
    @sidduaufroze 4 роки тому

    Instead of "props" parameter and destructuring in CurrencyRow.js, you can directly use {CurrencyOptions} as parameter.

  • @RahulAhire
    @RahulAhire 5 років тому +1

    How many hours does it takes for you to research and make a video over it? Seems a lot of work

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +6

      Depends on the video, but something like this probably takes around 5 hours to produce.

  • @vadimcoj
    @vadimcoj 5 років тому +3

    would love to see also vue

  • @divyam4516
    @divyam4516 2 роки тому

    How to resolve the error:
    Recieved NaN for the value attribute for input in CurrencyRow... Also the amount isn't getting updated when changing the currency. please help

  • @ThiagoVieira91
    @ThiagoVieira91 5 років тому +4

    Another awesome tutorial Kyle! But I could use some help here. 😅
    I didn't get the logic behind the following state settings, and its implications ahead:
    const [amount, setAmount] = useState(1);
    const [amountInFromCurrency, setAmountInFromCurrency] = useState(true);
    Why did you set the default of the first state to 1 and the second to true?
    Why the function to handle the amount change uses setAmountInFromCurrency as referential variable to allow the conversion from the second select field?

  • @slow103
    @slow103 3 роки тому +1

    Has this changed? It is with a API key now

  • @dianeliu7502
    @dianeliu7502 3 роки тому +1

    I follow the video. it show error "missing_access_key " . if somebody know if we need put the API Key in the react app somewhere.

    • @Soamsees
      @Soamsees 3 роки тому

      you need to get an access key by signing up to the exchangerates api and then you can use this api key in url read its documentation you'll get the idea of it
      p.s. - signing up is free of cost so no worries

  • @vishwajeetkumar1583
    @vishwajeetkumar1583 3 роки тому +1

    from where to get api

  • @codedjango
    @codedjango 5 років тому +2

    Can you please do the same for Vuejs?

  • @Mrkichanpark
    @Mrkichanpark 3 роки тому

    i get an error when i try to change the base currency, apparently i need a paid subscription to change the base currency

  • @andresramirez4469
    @andresramirez4469 3 роки тому

    You make it look so easy! how!?

  • @ideaopedia101
    @ideaopedia101 3 роки тому +1

    It shows me this error.
    Unhandled Rejection (TypeError): Cannot read property 'AED' of undefined

    • @oOLorakOo
      @oOLorakOo 3 роки тому

      Hey man just Change "?base" to "&base" this will make the error go cuz they changed the way u request the base in the API
      hope this helps u ;D

    • @Michael-oh2py
      @Michael-oh2py 3 роки тому

      @@oOLorakOo did this and still getting the same error

    • @CynthiaSotoCaballerolYEAHl
      @CynthiaSotoCaballerolYEAHl 3 роки тому

      @@Michael-oh2py I changed the fetch request to fetch(`${BASE_URL}&from=${fromCurrency}&to=${toCurrency}`) in order to work

  • @markramos3203
    @markramos3203 5 років тому

    Hi, Kyle, can you make a video about the virtual DOM? Thanks!

  • @ronistiawan1130
    @ronistiawan1130 5 років тому

    Thanks, Kyle

  • @kevinc7439
    @kevinc7439 3 роки тому

    Hello, I think an API Key is required now on exchangeratesapi.io. Is this something you can help me with? In the video the API Key is not mentioned or required...

    • @teliparth
      @teliparth 3 роки тому

      Yeah it do require

  • @MaxProgramming
    @MaxProgramming 5 років тому

    How did you made your intro?