Custom hooks in react | currency Project
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- In this comprehensive tutorial, you'll dive deep into mastering React by building a currency converter project. This project not only enhances your understanding of custom hooks but also demonstrates the importance of component reusability in React. The tutorial begins with setting up the project using Tailwind CSS for styling, followed by designing input components that can be reused efficiently. You'll learn how to create your own custom hooks to handle API requests, ensuring that the app remains scalable and easy to manage. The tutorial also covers state management and how to handle form submissions in React, emphasizing best practices like using useState and useEffect hooks. Additionally, you'll explore advanced topics like generating unique IDs using useId and handling asynchronous operations with fetch. By the end of this tutorial, you'll have a solid understanding of creating React components that are not only functional but also highly reusable, giving you the confidence to build more complex React applications in the future. Perfect for those looking to bolster their React skills and add a robust project to their portfolio.
Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...
![🎤 ไปกันต่อออ! จับฉลากร้องเพลง x P’ #XXSIVK [EP.2] (1/2) เพลงของใครจึ้งสุดน้าา 💓🎤 #MXFRUIT](http://i.ytimg.com/vi/mLI_K0sAS4o/mqdefault.jpg)
My friend purchased a course at just 200 rupees cost react course and now he at 12 lpa ..& this is the power of learning quality at this amount in this costful world.i also purchased
Fr? Is it his first job?
Yes his starting actually half of above but within six months he is at above in same company@@HrissW
Naah bruh @@HrissW
Course link
Really thank you this is one of the best react series I have watched and really appreciate your hard work man
This was a really great video providing deep learning which is actually asked in interviews.
Thank you for this wonderful content
Thanks Sir, this tutorial has been hard but you explanations made it easier. I will revise this session after finishing the entire series, once I'm comfortable with creating simpler React projects, I will buy your complete course, I'm now moving to the next tutorial. React Router
I'm nearing the end of the current videos in this series and I'm extremely satisfied with the explanations. Keep up the great content.
from where i get those api
Thank you so much, Hitesh Choudhary sir, for the incredible React tutorial! It's by far the best one I've seen on TH-cam and has made my React journey so much easier. I’m starting to believe that I can truly learn React thanks to your guidance!
Hitesh your videos are incredible. Thank you so much!
Thanks for the Awesome tutorial.
Hello Hitesh
I just want to thank you for this series coz it has helped me alot
Great Project Sir even i have completed more complex project on react but this one was just perfect that's it 🔥
i just love to watch your tutorials. Learning a lot of courses from you. Thankyou for your efforts.
Completed the project with tsx, found one issue with swapping values but thanks to comment section i was able to figure it out quickly.
Thank you so much hitesh
did you face issue while fetching the data from api? if not, can you please help?
@@sandeepanmazumdar8486 bro, is your problem solved. if yes please help me out iam also facing issue while fetching the data its showing a message of unable to fetch
You are amazing teaching skills with great attitude....👍
Well, I must say I learn quite a lot, I was scared of custom hooks I never touched I but I'm confident now.
thank you very much sir for such an amazing tutorial. Especially the concept of hooks got much more clearer to me.
Thank you for these high quality videos, I'm watching them and then trying to make the app on my own. It looks easy when you are doing it but much more difficult while being alone :-).
Thank you so much Hitesh,
as usual your teaching is top notch.
Thanks Hitesh for these videos, this is one of the best into to react series I have watched. Like it when you explain a lot of other simple concepts like fetch vs axios etc which helps us revise JS as well.
thank brother for sharing content.
I really don't comment to any video i am not that person but seriously saying you are a gem and i love the content from kerala 😍
Thank you sir for such an amazing react content.
Hitesh your videos are incredible. Thank you so much!
Very much clear about custom hook in react post watching this video. Thanks Hitesh for great video and am sure this series will be super exciting with upcoming videos :-)
If you can't figure out why the values are not swapping consider this from MDN:
TYPE
The type of the button. Possible values are:
SUBMIT: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
RESET: The button resets all the controls to their initial values.
BUTTON: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
You give me so much positive energy. Blieve me, this has equal important to information itself
Another great video. Thanks again! You are a great teacher!
IT HELPS ME A LOT TO GO THOUGHT THE CONCEPTS BRO... THANKS A LOT
really good project with lot to learn from it, thanks
Thank you so much, this video has helped a lot and I have learned a lot .Will watch more videos on ur channel.
Why to use ?
We could have just button and the onlcick event on that button when we do not want to actully submit.
Any explaination, that why people (I have seen at many places) uses the and then use the prevent default, would be appriciated.
The useId will resolve the issue two developer giving same name for two different things specially in larg scal project where multiple developers are working on components that will appear on a same screen.
Hitesh bhai Chai aur code pe aapne direct code likha hai toh samza nahi issi liye yaha aaya hu
Hope that won't get disappointed this time
Great Video Hitesh!
thank you for the project, a lot was learned. I really appreciate
Thank you for creating such great content. I am trying to learn coding by watching your videos.
Quick question: I followed all the steps but in the currency converter I made I am unable to change the input Amount. what can I do to solve it?
I will really appreciate your help.
Really helpful video. Loved it❤
Great video, thankyou
Nice video. Keep doing it consistently.
Thank you so much ,great learning video, help a lot.
Thank you for another informative video.
Learnt about custom hooks clearly. Thank you!!
Hey hitesh curency converter API link failed.
thanks for making these. they are really helpful!!
Thanks for amazing content.
Thank you
Absolutely enjoyed the latest video! Gained some valuable knowledge-thanks a bunch!
thank u its very useful!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thanks alot hitesh.
sir really like your theme #chaiTheme
best of the best. thanks Mr. Hitesh
Thank you very much sir
Thanks 🙏🙏🙏🙏
The only thing left that I want to understand is to be able to use the useReducer hook, together with useEffect hook to do state management without relying on external libraries like Redux
Thanks for the informative project Hitesh. I faced one problem which is, the To values remains while swapping. After hours of debugging found that the problem is in convert function. The value actually got swapped for a split second after which Convert function runs again with the updated amount but with old currencyInfo. Please comment if someone fixed this :)
Edit: Having convert function on onClick event of convert button instead of form's onSubmit fixed it.
Thanks a lot! Saved time!
After hours of looking as well, I finally figured out what was causing the issue. Since this is all happening in a we define the type for our 'Convert' button as "submit". We never set a type for our 'Swap' button and so it takes it by default as a form submit. By setting the type="button" for my 'Swap button, I'm able to successfully swap the amounts.
@@lcandao8660 can you tell the steps you used to debug this
great explanation
Great Sir
Hi Hitesh,
I have a doubt like you have swapped from and to value without using any third variable.
So my question is
1. setFrom(to)
2. setTo(from)
As soon as line 1 runs, its value is changed . How does it preserve its previous value?
How is it working??
Any concept I am missing ?
Pls suggest me.
From my understanding, he explained this in his video "Why you need hooks and project", using the counter project. In react, when you call a function, if you want it to change the value in real time, you must use a callback that forces it to wait for the value change. Otherwise, it does batch operations and applies the changes at the end of the function call. In this case, since it's a batch operation, setFrom() and setTo() don't have their values changed until the end, in which case they're effectively swapped. This is my understanding from studying his videos, I hope it helps!
thanks hitesh
nice work. pls what is the name of the plugin you said you install that help you design faster?
Another banger , keep them coming :)
hey hitesh can you make tutorial on how to use react js with postgresql
How to use reactjs with postgresql ?
I watched the video thank you for your response sir
Thanks for another great video. Learnt a lot. Can we now delve into testing react components with you ?
can you send me API link
please do javascript series in english too
thank you for this
Thank you so much
Thanks a lot
Thank you
Thanks
I learned a lot in this video
thanku
thank u sir
Please i want to know what plugin do you use to suggest codes
I kind of like it
Thanks
51:20 somehow my swap function isn't setting the correct setConvertedAmount(amount), just stays as the old convertedAmount. xD even tried using temp values, I'm just going to walk away for now lol thanks for the video!
yes mine also ping here if you find the solution
Thanks
Objects are not valid as a React child (found: object with keys {label, amount, currencyOptions, onCurrencyChange, onAmountChange, selectedCurrency}). If you meant to render a collection of children, use an array instead struck by an error while running this program. Someone plz correct me..
It seems that this API no longer works
❤❤❤❤
👍
This currency api link is not valid anymore, please update.
Hello sir, pranam. Sir I want to do your node js backend course from learn code from me website is that course sufficient for backend learning? In ineuron it's same topics videos but price is much high why sir?
If you cleary doubt it will very grateful ❤
🥶
hey bro i have used the url provided by you in github but still the the url is not working i am not getting any type of data from the url
Sir ji explain super keyword please
Hello sir,
I’ve been trying to access this course of Mern stack on your site but somehow it’s showing sorry for the inconvenience, contact admin.. I’ve already bought this course 2 months back. Could you please let us know by when the issue will be resolved?
❤👍
❤
from where i get those api
My currency type button is not working anyone have solution of when i clicked that button that button don't show any name just print all countries value in console
I have paid Rs.700 for your complete python course.But actually it's not working for the past two days. The message is displayed as your session is logged out. But i have paid 700 just 2 weeks ago.. And it is valid for more than 1 yr.. I want to know why I can't login to my account
Yes correct, it's showing contact to admin..
@sandhiyasandhiya1603 are you able to login now?
Everthing is Fine But Api You Provided was Not Having Any data currently
hey hitesh, the "To" value is not getting updated with Swap function. I tried saving the values in const befor setting in "setXXXX" but no luck. The Fetch API call is happening twice on page load. I tried to debug a lot but couldn't able to found the reason. Any suggestion?
After hours of looking as well, I finally figured out what was causing the issue. Since this is all happening in a we define the type for our 'Convert' button as "submit". We never set a type for our 'Swap' button and so it takes it by default as a form submit. By setting the type="button" for my 'Swap button, I'm able to successfully swap the amounts. Hope this helps.
@@lcandao8660 Thanks so much for putting the time in to figure this out. That isn't an obvious solution to me at this point. Mind sharing how you figured it out?
@@lcandao8660 FROM MDN
type
The type of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
I haven't looked at the code in several weeks, but I can go through my thought process from what I recall. I debugged the problem with several breakpoints within the swap function call. I looked at the value going in and what would come out. I noticed when slowed down, the function call would effectively swap but immediately swap again. This would cause my "To" and "From" values to be identical.
After a while of staring at code, I noticed there was no type assigned to the "Swap" button. but there is a type assigned to "Convert" button. Then I started to experiment with eliminating the form template and just running the buttons alone. This didn't work, so the last thought I had was "what if this button is submitting the form?". That is when I input the type and it solved my problem@@Adventures_English
How to run this project ?
Not at all fun boss. in this video it feels like you have the curse of knowledge.
You do stuff as if we already know what you are doing but we dont. to watch your 1 hour video, we have to keep looking for stuff on internet for 2 days
Sir, the ineuron team is not granting us the access to our LCO courses. Instead, they are issuing refunds for the amount we initially paid for the course on LCO.
I purchased a course from LCO for 300 rupees and now they are offering the same course on their site at 25,000 rupees!
Sir kindly provide us the access so that we can continue our learnings from where we are made to left off!
Is there anyone else who is having the same issue of accessing LCO courses? Please reply to this text
BTW if you are actually trying to build a currency converter consider looking for a better API. This one is not accurate in a lot of case. For example, the Peruvian sol it get wrong by orders of magnitude.
hey where is helper file buddy
the api has stopped working. i am getting the error
api not working
Bro Hindi me bhi bat kar lo
plz give an api