You are an absolute legent. I've spent the whole day trying to figure out how to do it and this has been the best explained and the most complete explanation I've seen for React based in fuctions and not classes
I have a further question. I have in one file called "fetchCall.js" a fetch call to an API, but I want in another file called "inputTextFilled.js", which is a form, I want to have some prefilled information for some of the parts of the form. How can I make it to be able to import the values from fetchCall.js to inputTextFilled.js?
You can make the api call from the fetchCall.js and return those by exporting them. Then just call the fetchCall inside the inputTextField and use the values returned.
@@PedroTechnologies So, to do that I should declare the variable outside the function with a "export const[name,setName] = useState("")" and then in the inputTextField I should do an import {name} from './fetchCall' And then just to access the data what should I write? Does it work only writing "name"?
Best video covering this that I have found. Thank you so much, most videos are overly complicated and 20 minutes long. This was so straight to the point and explained clearly
@@Shaojeemyit's not ChatGpt it's just he has an extension specifically for React installed in his IDE. All it does is give him hints and fix his React code when needed
European --> It sounds a bit like - You are peein' - 2 squared = 4 ---> "Too square" is slang for lame/uncool Pretty terrible jokes but thanks for the video
Yeah, I've been putting off making my third video of a small series I have on my channel teaching about authentication. The third video teaching JWT is coming probably this week!
How can We display the data without having to press the button? I tried by {name} But its not showing anything. I just wanted to remove the button input to display the data and show the data as soon as page loads
Nice video. I know how to use fetch and I find it easier than axios haha. I still do not understand why I should use axios instead of fetch and all te advantages that I can get using Axios.
@@junnaid08 It's nothing technical actually. It refers to the joke setup. In this data the joke is divided into to parts in the object (setup and punchline) { setup: "Can February March?", punchline: "No, but Aprill May" } so you can present it better in the app or show the punchline after the click etc.
Thanks for the vid, pretty clear. Btw, the API is down? I'm getting a 500 error. I can user another API though, but I wanted to get some jokes while I code. :(
I'm using react + node express, when I am sending post request using axios api request, it sends request to locahost:3000, the localhost:3000 is my react server, and my node server is localhost:4000. I had set the "proxy":"locahost:3000"(in client/package.json) but it has no effect. pls help my.
@@PedroTechnologies I managed to figure it out I used useState and then just assigned the current state to the jsx html or w.e but when you reload the page the data doesn't get added instantly wound how you would get around that. Also, will check out your video on useEffect thanks for letting me know
There is axios.post and axios.get I am assuming fetch is axios.get. What would be axios.post? Post is sending a payload data to the API to be validated.
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
![ReactJS Course [7] - How To Fetch Data From an API in React](/img/tr.png)
You are an absolute legent. I've spent the whole day trying to figure out how to do it and this has been the best explained and the most complete explanation I've seen for React based in fuctions and not classes
I have a further question. I have in one file called "fetchCall.js" a fetch call to an API, but I want in another file called "inputTextFilled.js", which is a form, I want to have some prefilled information for some of the parts of the form. How can I make it to be able to import the values from fetchCall.js to inputTextFilled.js?
Thank you so much for the positive comment! I am glad I could help!
You can make the api call from the fetchCall.js and return those by exporting them. Then just call the fetchCall inside the inputTextField and use the values returned.
@@PedroTechnologies So, to do that I should declare the variable outside the function with a "export const[name,setName] = useState("")" and then in the inputTextField I should do an import {name} from './fetchCall'
And then just to access the data what should I write? Does it work only writing "name"?
Nice pacing dude, you weren't speed piling information on us and you weren't slowly stretching things out either. I understood it quite well.
Thank you! Glad you enjoyed it! I always get scared that I am going too fast or too slow hahaha
Oh god!!!!! after days of struggling for a single concept and getting to know that its this simple.
Thanks man for this
Nice explanation in under 10 minutes, thank you!
And your responses to the jokes had me cracking up, that could be its own youtube series ;)
lmaoo Glad you enjoyed it!
I watched few tutorials before . They are super fast and not explaining even in a simple details like you . Your videos is very clear . thhanks youuu
So nice of you!
Best video covering this that I have found. Thank you so much, most videos are overly complicated and 20 minutes long. This was so straight to the point and explained clearly
Was it just me or chatGPT kept switching up the file structure everytime i needed more details for this?
Exactly..well explained and straight to the point.
@@Shaojeemyit's not ChatGpt it's just he has an extension specifically for React installed in his IDE. All it does is give him hints and fix his React code when needed
Great video. It was direct to the point with all the info needed none of the info we didn't want!
I heard about this Axios from your previous video of ReactJS MySql tutorial. Really helpful for beginners like me on reactjs and axios. Thank you
I am glad you liked it! When I first tried to learn fetch I thought it was weird, when I saw axios it made so much more sense!
Thanks man, this cleared my concept. I'm now gonna watch all your videos
the best explanation i've found online so far
Pedro, great job. I started to follow you some days ago and I am really enjoying your content! Congrats.
I was just trying to translate an Axios request into fetch, now I know how. Thanks again, Pedro!
Finally a tutorial I could follow and not have to slow down playback speed. Do you have any flask + react authorization tutorials? Thanks a bunch!
Thank you! Happy to hear you liked it! I am not that experienced with flask unfortunately!
@@PedroTechnologies Unfortunate :( . Maybe its time to look into learning express or something, ill try and find some resources on your channel.
Thank you so much for this video. A great help for beginners.
esse sotaque e nome nao me enganam, awesome video dude
Crisp and clear...Too good...Thank u
Thank you!
Love the way you simply explain it. Greetings from Sri Lanka
Great and clear explanation with a few terrible jokes (which are totally my jam)! Thank you!
Hahaha Glad you like the video!
European --> It sounds a bit like - You are peein' -
2 squared = 4 ---> "Too square" is slang for lame/uncool
Pretty terrible jokes but thanks for the video
Hahahaha I spent hours looking at the jokes from this API and i got like 30% of them
Note : If you want to learn Axios don't skip this video.
you are very good teacher. Short video with clear explanation. keep it up.
Thank you so much! I really apreciate the support!
@@PedroTechnologies you are welcome
after seeing this video my all confusion is clear. Thanks, man!
Glad to hear it!
thankyou, this tutorial was very helpful. the jokes were hilarious btw.
I think I might be becoming a fan. Thanks for the explanation
Glad to hear it!
That's exactly what I'm looking for.
Thank you and keep going!
Thanks bro , hey make sure to zoom in when you’re writing code , it was very tiny
Good stuff man... Direct and to the point. Unlike those terrible random jokes! :) Also, what extension is displaying the the size of your imports?
Import cost! Thank u hahaha
It was really an amazing video. 🤩 It is having all points to get clear Ideas about axios and fetch. 😊
THANK YOU! FOR THIS AMAZING STRAIGHT TO THE POINT TUTORIAL!!!!!
Awesome no confusion now
:)
I like your tutorials. It really helps. Keep up the god work.
if u have little kids around those jokes would kill lol. great tutorial btw. I been using fetch but seems axios is a bit quicker.
This video really come through, thank you!
Thank a million!! I like your video's. Could you make a vid showing how to setup a baseURL with a JWT header? those videos are hard to find
Yeah, I've been putting off making my third video of a small series I have on my channel teaching about authentication. The third video teaching JWT is coming probably this week!
Thank you so much! Because of this video I accomplished what I needed to.
How can We display the data without having to press the button? I tried by
{name}
But its not showing anything. I just wanted to remove the button input to display the data and show the data as soon as page loads
The reaction to the jokes was hilarious 🤣🤣🤣🤣🤣
This tutorial is super helpful!
This video helped me so much! Thanks pedro
Thank you so much!! You helped me a lot
Great tutorial, but maybe you could have the browser and vsCode open side by side, instead of jumping between both programms.
Thank you! I currently don't have 2 monitors, but im saving to buy another one! When I do I will keep vscode on one and the browser on another.
This guy is good. He's speedy and efficient! Love it.
please ask your content consumers like me to drop a like after we consume your content. It helps with me considering you seriously
Dont know if you had gotten it yet, but the 2 Square joke is math lol ... " why didnt the 4 get into the club"
EXTREMELY USEFUL video, thank you KINDLY friend
Nice video. I know how to use fetch and I find it easier than axios haha. I still do not understand why I should use axios instead of fetch and all te advantages that I can get using Axios.
Both do the same hahaha I think axios is easier to understand for beginners and it has a great support for changing methods/opts
On point again. ThankQ Bro
Thank you!! great tut
worth liking bro !
Thx for video!=))) Where is the list of open api which you have mentioned in video?
your videos are amazing
thx. in nextjs or mern and so on, i use only axios ^^
I love axios
I have not seen someone explaining the first joke so : If you're in the toilet, you are peeing (European)
This is awesome, thank you :)
the european punch is read like "you're peein' "
youre welcome
Hi i have a question, id i had a multiple jokes what should i do? store them in an Array??
Thanks!!!!
Yes! If the api returns a list you can set a state as an empty list!
Please, how do we make a "post" request? Any link on that? Thank you.
Hey sir. Can not we use axios or fetch directly in a component or can i make react component async
can u pls make a vid how to use Axios and react on Node.js backed instead of other pre-made api's. make a small api and use it pls
good explained bro
Hi! What's this extension that display the size of the packages?
Import cost :)
Thanks PEDRO
Great video. I am confused with setup?
Thank you! What about the setup?
@@PedroTechnologies response.data.setup. confused with setup word. where its come from
@@junnaid08 It's nothing technical actually. It refers to the joke setup. In this data the joke is divided into to parts in the object (setup and punchline) { setup: "Can February March?", punchline: "No, but Aprill May" } so you can present it better in the app or show the punchline after the click etc.
nice explanation
God bless you so much you will make heaven
Is it possible to call getJoke without using a button? So when the page loads, the values are automatically shown in a label/textfield.
Hey I am curious to know your vs code theme please tell me the name of it
I believe that it was Palenight!
bro i want a help with you to make travel guide application with axios
Thanks for the vid, pretty clear. Btw, the API is down? I'm getting a 500 error. I can user another API though, but I wanted to get some jokes while I code. :(
I'm using react + node express, when I am sending post request using axios api request, it sends request to locahost:3000,
the localhost:3000 is my react server, and my node server is localhost:4000. I had set the "proxy":"locahost:3000"(in client/package.json) but it has no effect. pls help my.
Hey if your node server is on the localhost:4000 then you should make the request to the localhost:4000!
@@PedroTechnologies it is not working, I tried
How do you load the data on load no event? just when the page loads it displays the joke without a button?
You can use the useEffect hook for this, I have videos on useEffect if you are interested!
@@PedroTechnologies I managed to figure it out I used useState and then just assigned the current state to the jsx html or w.e but when you reload the page the data doesn't get added instantly wound how you would get around that. Also, will check out your video on useEffect thanks for letting me know
Best explanation
can we do post and other request using fetch ??
yes!
@@PedroTechnologies have made any tutorial with post request using axios?
I think I might have taken the "punch line" a bit too literally. Now, I need to buy a new monitor. /:
hahaha
Sorry about that, happens to everyone!
There is axios.post and axios.get I am assuming fetch is axios.get. What would be axios.post? Post is sending a payload data to the API to be validated.
Great video btw. Thank you
Amazing 🙌
thank you ! ❤
Nice job Thanks!
Thank you! Glad I could help!
very helpful!
the api link is not working
the punch line is that "you are peeing"
joke punchline explained. "European" as in "you're peeing" or shorthand "you're Peein" get it? lol but any who the video was amazing. thank you!!!
Hahaha i'm dumb, I don't know why i didn't understand it!
To the point 👍
Glad you liked it!
Just to explain the second joke, the word European is pronounced as "You are peeing" while in the bathroom.
Thank youy hahaha Its actually pretty dumb of my part that I didn't understand lmao
Thank you
great video
Thx so much
KING
i cant sleep, thinking about the joke all the time.. its so confusing what is it all about
unfortunately that api is not working anymore..
I love you bro
lmaoo thanks broo
Bruh, I really loved this video but I can't believe you didn't laugh at this jokes lol! European? lol
Api Link not working. Please repair it, bro
i didnt get any response
The joke at the 1:45, read European as "eu r pean" or "you are peein(g)".
❤️❤️❤️
European = you’re-peein = you’re peeing
API link not working anymore...link is a joke now !
Hazlos en Español no seas mamón, te llamas pedro man seguro eres mexicano we, apoya al programador latino xd
Soy brasileño jajaja Yo hablo un poco de español.
You're peeing 😝