Fetch Data from an API in React.js - Part 12

[@zacharydobbs9814]

This is by far the most straight forward tut on api calls I've ever seen, well done man!

[@cucucucucumber]

Two years later and this tutorial still helps me

[@agamjotsingh7371]

Me too!!

[@sirrobinhood3409]

Totally new to React. I have been screwing around with trying to make a fetch POST working for a week. From CORS issues to goofy ways to get at response json with 18 .then statements or catching error types. YOU ROCK! Thanks a ton!

[@astrotoaster5555]

This is the simplest way of getting things done, now I have my php backend with mysql and my frontend with react, thanks a lot. subscribed!.

[@greygoose744]

Yo bro .I m trying to do same but instead of using JavaScript native fetch,I m using an API library called Axios for API call but I m getting 404 not found ,

[@alpsprajapati]

Really quick and easy to understand. No story, direct to the point. Thanks

[@push-to-talkpodcast2864]

yah man. this is it. really simplified instead of making it seem super technical. nicely done

[@travenishere6063]

Really well done tutorial. Love it when you get to see real code working and also have an explanation to why certain things are done the way they are done!

[@dragonburger5676]

Love your style of tutorials! To the point and not wasting anytime. And you clearly know what the heck you are talking about

[@eldiablorojo]

I’ve been searching the web for the best way to do this for over a week now and with my limited ability found it really difficult to understand. This explanation and example was so simple and straight forward I was able to start my app and have the data displaying... thank you! 🙏🏼

[@darrionwhite1563]

Bro! I am mind blown! You just made that seem so easy! After watching this, I feel confident about my junior technical interview coming up. Thank you so much!

[@huangyan8409]

You are really my big help! searching online for whole day in the end your video is truly my answer!

[@pjcodes438]

Love it. Awesome video Ben! Also love the INSANELY fast typing speed haha.

[@firasalkhatib5778]

well done ,.... straight , fast , and clear ,, thats how should all the tutorials should be , thanx for ur effort ,

[@tenshuohm7987]

I love your tutorials because they are straight forward. Thanks, man!

[@g43s]

simple, straight to the point, well explained, 10/10

[@joe_3y3s]

these tutorials are just so great - really helping me gain familiarity and confidence with React - THANK YOU!

[@paulmoustakas6422]

Thanks a lot Ben! I agree with Zachary Doobs below, the most straight forward tutorial ever seen. First time i really understand the logic of JS. Ty !

[@abhishekprasad6317]

Thank you so much. was stuck from like 12 hours on this, I had to make componentdidmount async and then errors errors and errors. this video and the loading featured helped like wow thanks again

[@skinpotatoes]

BY FAR THE MOST STRAIGHT FORWARD TUTO !! Yo bro !! i spent one week on udemy s**ts without issue .... thumb up

[@nirvanacore5543]

after struggling with axios finally this helped.. Thanks for sharing

[@TimothyVandeweerd]

Thank you, well explained and just what I was looking for. I appreciate you sharing your knowledge.

[@Intskints]

Just found this channel and I am amazed by your content. Was also looking to learn some React and this is perfect :D. You'll probably be the channel that has 500k subs next year. Keep up!

[@tiekto4253]

My man, well done. Structured, clear, informative. 10/10

[@bawad]

Thanks

[@MN-fl3hb]

Best tutorial I’ve seen so far. Excellent!

[@cicciopasticcio8469]

Thanks, brilliant, simple, short, I loved it

[@TheYakMaster408]

Thanks for making this video so straight forward and under 10 mins! Your the man!

[@Mysterious_debris_1111]

I dunno why but i find your videos immensely satisfying. I can dedicate my whole life watching u coding

[@bawad]

Well you're in luck, I have quite a few coding videos

[@lucywakai]

This video is the best. Well explained. Thank you for sharing your knowledge :)

[@adityamarzuk5970]

This is what i need others video teach with their finished apps

[@SocksWithSandals]

That was a great, clear example.

[@tamer7954]

Super straightforward and concise tutorial. Thank you!

[@uzairabdullah208]

Really helpful, lots of thanks from Pakistan!

[@DanteMarinho]

Very nice and clean tutorial. Thanks.

[@thomasrichter3185]

heyo! I do comment quite rarely, but you really just saved me! liked and subscribed buddy

[@rishabhagrawal4560]

Nice!! Never thought it is this much easy

[@Bitbeq]

Great tutorial. Straightforward and well done!

[@sylviaf.6688]

Do you have a tutorial on getting an api when the api is in an object and not an array? This tutorial is awesome by the way, helped clear up a lot of the concepts I had confused.

[@daviddonadze221]

thanks a lot bro. just starting react and u are a huge help. 👍👍👍

[@vivekm.1374]

@benawad Hi Ben I could see the data in the console.log(data.results[0]) but when is set this to state in setstate like person: data.results[0] And inside return in render function I try to display it using the same syntax in video it is showing as cannot read name property of null {this.state.person.name.title} Can anyone help me please

[@icyrealm7]

Great vid! Straight and to the point!! Thanks.

[@vsevolodpokhvalenko4705]

Thank you!!!! You've rescued me🙏🙏

[@agamjotsingh7371]

You just got a new subscriber!

[@thatsfinn]

I got several minutes into this tutorial before realizing this was Ben Awad..

[@socialkruption]

reason?

[@Ya55-yy]

Great content, well done!

[@MatthewTorontoParis]

love to explain complicate concept with simple example!

[@andrewnleon]

I would recommend custom hook and functional component. Do we sort from api or from code in js?

[@TaronSarkisyan]

Awesome work! Thanks

[@adnanhaider684]

Very helping, I was stuck from 2 days now. Now thanks I figure out from this video. Query=> "But how can we do if we have to show data in the list??"

[@jindon27]

Hi Ben, thank you for these nice tutorials. Really like how you teach. Learning a lot. Can you please include proper authentication with react using JWT (production ready), if it is possible. Thank you once again. Keep up the great work good Sir.

[@daksh_sagar]

Yeah, would like that too, production grade auth.

[@bawad]

I think I will do a tutorial with that and firebase in the near future

[@Albertmars32]

i would like that as well, also would appreciate if you integrate stripe too

[@daksh_sagar]

But please no Passport, there are plenty of resources for passport and I do not like it at all. If you could create some sort of middlewares that could be dropped into any route to make it a protected one.

[@bawad]

Have you seen the addUser middleware function: github.com/benawad/slack-clone-server/blob/53_deploy/src/index.js#L80

[@riddhesh26]

Loved this. StraightForward Api calls. Can you make a video which uses Axios for Api calls ? thanks

[@joelrojas6970]

Excellent thank you🙏

[@Prim3MavericK]

Is there an updated version of this with React Hooks? If not, can you make one pls?

[@EidosGaming]

You'd just use useEffect(..., []) to fetch the data and set your state

[@zakidz6716]

@@EidosGaming i did the samething with a function component but the problem is that the function keep running and updating the results edit: i found the solution add an empty array to the second argument of useEffect function to make it run once

[@JO-dr4dr]

Best video on youtube

[@user-ew3sb8lu7d]

Great video ….we don’t need to install json-server right ?

[@rishabhtripathi3569]

I am thankful to you brother

[@DatCrossGuy]

Awesome tutorial, do you have one for posting data from a from to a server using react?

[@bawad]

Only with GraphQL

[@Codefide]

Beautifully explained thanks! Any follow up on this to do with looping round and rendering multiple persons?

[@stunna4498]

ben do you prefer class style components or functional components?

[@PrathamGupta2408]

When the line was getting big, it reformatted into multiple lines. Which extension did you use for this?

[@shloaksaxena7279]

probably prettier

[@noelcovarrubias7490]

Hello, is there a difference between the type of component that you're using and this type: import React from "react"; function MyComponent(){ return Hello World } ? I ask because I am trying to learn to fetch data and the code seems so different from the one I learnt.

[@matasinp92]

Thank you man., the best tutorial, I have ever seen

[@Dude-iz2dw]

how do you view json in chrome 0:18? which extention do you use? I just get a plain string :-(

[@extremespartan117]

This was a big help! Thank man!

[@sneakdotberlin7085]

This might be a dumb question, but let’s say the final rendered container is a significant fraction of the page. How do you keep the “loading” or “error” render the same size as the final rendered version so everything doesn’t jump around in the layout? Is there some CSS best practice for forcing the exact dimensions so the loading message/spinner element renders to the exact same size as the final response once the API data comes back?

[@eotikurac]

can i fetch on button click or do i have to use componentDidMount hook? i tried doing this for the past two days but cannot get it to work the way i want. i get flooded with error messages that i can't interpret properly.

[@ContortionistIX]

Hi, you named the component "FetchRandomUser", but essentially it's a "User" component that fetches some stuff. Is it normal for React components to casually fetch stuff or is there a orthodox way to structure this so that a service component fetches things for the main component?

[@zlackbiro]

Very clear and nice. 🙂

[@NAEL4SLR]

Thanks for sharing

[@westfield90]

Such a great video. Thank you

[@benjaminsanchezlopez3266]

Hi, incredible video! Can i ask you a question? Can you for example create a loop and print all the data into a list? And can you make that list a href for taking you to another page? thank you very much

[@boo5274]

Could you show a way of doing this within a functional component?

[@binutil]

Hey Ben, love your tutorials. Can you maybe do one for React and D3? The react way of implementing it. There is so less material out there on that subject.

[@bawad]

thanks, I haven't tried D3 yet, but when I do I'll make a tutorial on it

[@altituszalex4889]

Hi the tutorial is transmitting clear and sharp.Can you add how to get(fetch) only single user? by id or by name?

[@gloriareyes6556]

something that is a functional component instead? Would that be diff??

[@ironears]

Thank you, that was excellent!

[@ds2856]

Nice demo. What is the IDE you have used for reactJs?

[@bawad]

vscode

[@momonkha5846]

thank you good man, when I grow up I want to be like you ;D

[@nick_jacob]

Thanks for this. I was using RapidAPI and they generate the syntax to follow but it doesn't work. This simplifies everything. I'm going to keep practicing because I understand this the least and always avoided it.

[@Johnny_1305K]

Hey Ben, Really good stuff, all of your videos! I'm having a problem with the spacex api for a while now. I can fetch the api and log all its data (as a single launch) so this works..... console.log(this.state.launch) -> "huge object and this works ... console.log(this.state.launch.rocket) -> nested rocketObject This doesnt work. console.log(this.state.launch.rocket.rocket_id) -> undifined but the rocket_id property does exist in the rocketObject. Any idea what I could be doing wrong here? appreciate your help

[@Johnny_1305K]

its worth noting that it only happens if I set the launch object to a state. If I assign it to a variable, I can access all the properties....

[@bawad]

where are you putting the console.log? setState is async, so it won't take effect right away

[@Johnny_1305K]

@@bawad import React, { Component } from "react"; import { Link } from "react-router-dom"; class Launch extends Component { constructor(props) { super(props); this.state = { loading: true, launch: {} }; } componentDidMount() { let flight_number = this.props.match.params.flight_number; flight_number = parseInt(flight_number); const url = `api.spacexdata.com/v3/launches/${flight_number}`; fetch(url) .then(res => res.json()) .then(launch => { this.setState({ launch: launch }); }); } render() { console.log(this.state.launch.rocket); ......................... ......................... } } This is my code, The funny thing is, is that I do get the rocket object with all its data, but when i do console.log(this.state.launch.rocket.rocket_id); It throws an error... I have tried async await and tried .then() From the promise I can log rocket.rocket_id, but not from the state..... Hopefully its a minor ting you are able to see right away....

[@bawad]

What does console.log(this.state.launch.rocket) print? What is the error you get?

[@iurii7752]

Thank you for the inspiration, great job.

[@sathvikvutukuri9179]

Neat explanation..................

[@antoniodungao]

Thank you. This helped me.

[@Jasond29223]

what if we need to fetch the url based on the props that we get?

[@alonelyproducer663]

Is there a way to display many persons?

[@derrickwilliam1009]

Very much helpful , Thanks a lot

[@dhanukalakshan1553]

Thnks bro you are a lifesaver❤

[@iissy85]

타자가 엄청 빠르시네요 ! 👍

[@kevinmesto608]

Hey quick question for anyone who can answer, I've been seeing cors being used, something like this works fine so y would cors be needed?

[@KearlHat]

How can you loop through to display an entire list?

[@ashwinmukati5229]

Why did you use componentDidMount instead of componentWillMount?

[@bawad]

componentWillMount is being deprecated

[@souravraodora6671]

Where did results cane from?

[@abishekh07]

Thank you, Ben. I am trying to fetch data from multiple endpoints of an API for my COVID-19 stats app. I am making use of Promise.all to achieve this. But the issue here is that, every 1 out of 10 times I get a list of "undefined" values loading on the screen. Can you help me out with this!?

[@vaclemor102]

Did you find a solution to this ?

[@realprogger]

is it standard theme in vscode?

[@faizannaseem7095]

is it necessary to create database like phpmysql or mongodb to create fetch the data and then create api or can we fetch data directly from an API of JSON?

[@bawad]

What do you mean

[@aniket6257]

Hi, It was a great help. I have a question How to add additional parameters to the fetch? (lets say the api allowed a parameter like name of a person, how to send a that parameter using fetch?) thanks

[@bawad]

developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options

[@yasmineezequiel3972]

Great video thanks!

[@Mxtive]

Any reason you decided to use JS instead of TS for this? Imo it's good to push people towards TS whenever possible.

[@bawad]

I think it's better to learn React then introduce typescript.

[@pendutswertreshitzguide5927]

hi sir there is no display in my browser but when i console log it there is display . How to fix this

[@AntonyAllocious]

How to fetch the data individual items like (Male or Female)?

[@ivansebastianmarin5557]

Bunisimo Gracias por todo