React js Tutorial - How To Get Data From An API With React

If you like this channel and would like to support it i accept bitcoin donations to my wallet address:
1Fm3ZywfnioXjHpUbVppLvpzehvRq2vfQs
Build native apps for iOS & Android with drag and drop:
interactiveappbuilder.com/
Featured Full Courses I Recommend To New Developers:
React JS - The Complete Guide (over 150 000 devs enrolled)
click.linksynergy.com/deeplin...
React JS Web Development - The Essentials Bootcamp
click.linksynergy.com/deeplin...
The Complete React Js & Redux Course - Build Modern Web Apps
click.linksynergy.com/deeplin...
The Complete React Native + Hooks Course
click.linksynergy.com/deeplin...
React Native - The Practical Guide
click.linksynergy.com/deeplin...
The Complete JavaScript Course
click.linksynergy.com/deeplin...
Recommended VPS and dedicated servers for your hosting:
www.vultr.com/?ref=8317938
More Content:
React JS Tutorial - Create A Simple Login System Episode #1 of #3
• React JS Tutorial - Cr...
React js Tutorial - How To Use localStorage and sessionStorage
• React js Tutorial - Sa...
HTML/HTML5 from beginner to expert:
www.udemy.com/course/html5-in...
In this tutorial from fullstack development you will learn how to fetch data from an API in React using Javascript and the fetch function.
#keywords
react js api call
react js api
fetch data
api

[@FullstackDevelopment]

Github repo for this application:
github.com/nordin-johan/tutorial-reactjs-fetch

[@OptimalTrainingGroup]

Thank you! This has helped me tremendously. I didn't understand how to SetState with asynchronous data and this helped a lot. Great job!!!

[@FullstackDevelopment]

You are welcome!

[@reshaknarayan3944]

Great. Looking for this for past one week. Saved my day. Thankyou , became a subscriber

[@FullstackDevelopment]

Thank you!

[@FullstackDevelopment]

If you want to post data as well: ruclips.net/video/8SkiIAbFbNs/видео.html
Full Course For React JS - The Complete Guide: bit.ly/2oCrfH0

[@michaelrurka9340]

Amazing video! Thank you so much for making this very simple and easy to follow! Perfect!

[@FullstackDevelopment]

Thank you!

[@alreadytakenindeed]

Thank you so much for this tutorial!!! It solved a huge problem for me with data from response!

[@FullstackDevelopment]

Thanks!

[@NinadFaterpekar]

Thank you. this was very clear.
the API fetch component starts at 4:00

[@naoufalalaa6624]

thanks

[@FullstackDevelopment]

Thanks!

[@bhagyashreenarwade680]

he didnt show the output? does this works actually?

[@SocksWithSandals]

End to end that was exactly what I need React for.
Thank you.

[@FullstackDevelopment]

No problem

[@gcuwajidali262]

Too Much Love ...! This is what i was searching from basic to practical...!

[@FullstackDevelopment]

Thanks!

[@thatdumbguy2800]

This is exactly what I was searching for...thank you

[@FullstackDevelopment]

You are welcome

[@mauriciogomez6944]

A great introduction into fetching API data and what it would look like on code! thank you!

[@FullstackDevelopment]

Thanks!

[@arifshoaib3239]

This is What I Expected. Thank you :)

[@FullstackDevelopment]

You are welcome!

[@palviczjan01]

Thank you! You saved me from a mental breakdown with this tutorial... :D

[@FullstackDevelopment]

You are welcome!

[@kamaboko1]

Easy-peasy to understand. Great job!

[@FullstackDevelopment]

Thanks!

[@bmejia220]

Thank you for the great tutorial. The tutorial is easy to understand. Liked and subscribed. :)

[@FullstackDevelopment]

Thanks, you are welcome!

[@cricket62200962]

Great video, thanks for explaining things simply!

[@FullstackDevelopment]

cricket62 thanks alot!

[@bhavukjindal9432]

Great man exactly what I was looking for, Thanks

[@FullstackDevelopment]

No problem!

[@fonncatalina6464]

Thank you so much!! Subscribed immediately!

[@ShankyBady]

Thank you so much, this is precisely what I was looking for.

[@FullstackDevelopment]

Thanks!

[@ShankyBady]

@@FullstackDevelopment can you help me out with something? I'm sort of stuck.

[@ShankyBady]

It's not related to this though, so if you wouldn't mind, I'll ask.

[@CesarJuarezVargas]

Very useful for our "first steps". Thank you!

[@FullstackDevelopment]

Thanks!

[@wz5044]

short video good explained, exactly what is needed ty a lot

[@FullstackDevelopment]

Thank you!

[@KeaganStRose]

You are amazing, thank you for your clear instructions.

[@FullstackDevelopment]

You are welcome!

[@irshadhussain9663]

Thanks man great explanation as always :)

[@FullstackDevelopment]

Thanks alot :)

[@anonymoussloth6687]

how can we do this with functional components in react instead of classes?

[@nilsojr2790]

Simple and objective. Great !!

[@FullstackDevelopment]

Thanks!

[@hosseinghadirzadeh4999]

it was great and useful for me.
thanks man

[@FullstackDevelopment]

Thanks!

[@anushkareddy1455]

you just helped me with the exact solution thank you

[@LawZist]

very good , simple and learning video! more of those :)

[@FullstackDevelopment]

LawZist Thank you!

[@siddharthpand8]

Thank you for making this clear

[@FullstackDevelopment]

No problem!

[@omid443]

simple and helpful. Thank you.

[@FullstackDevelopment]

Thanks!

[@rachidbouali8511]

thank you, this helped me a lot

[@viv_7475]

Thank you .This was very helpful 👍🏻

[@FullstackDevelopment]

You are welcome!

[@sanjurj3278]

great video .....this is what beginners need

[@FullstackDevelopment]

Thank you

[@aurelianspodarec2629]

Its right here: reactjs.org/docs/faq-ajax.html

[@israelmanzo8725]

Very nice..!! Thank you for this tutorial.

[@FullstackDevelopment]

Thanks!

[@locnguyen-dv4ok]

Thank you so much ! It is very understandable

[@FullstackDevelopment]

You are welcome!

[@dmkjava]

Thank you, Useful info.

[@FullstackDevelopment]

Thanks alot!

[@ManishSingh-lk4qs]

Perfect ! Thanks Sir.

[@FullstackDevelopment]

Thank you!

[@sasikalanarayanasamy6096]

Thank you so much. I have seen so many videos to fetch the data using API in React and worked like that but nothing is worked. But your tutorial is very easy to understand and it is working too. Thanks once again.

[@FullstackDevelopment]

Thanks!

[@madhavrw4273]

thanks for so much for this video, it solved my problem

[@FullstackDevelopment]

You are welcome!

[@d3v3r_]

Thank you! I solved my problem! :)

[@FullstackDevelopment]

You are welcome!

[@blendermaster8934]

Thank you,you saved my life!!

[@FullstackDevelopment]

You are welcome!

[@murodalisharipov5929]

what if am doing routing in the return section then how do I pass items to other components? I want to render items in other components and use it there how do I do this? do i need to fetch data for each component in order to use it there?

[@TheTibo69]

Amazing! thanks a lot!

[@FullstackDevelopment]

Thanks!

[@ksdnews6757]

thanks bro!!!! amazing and easily

[@justdvl]

Thank you for this. It's clear and looks easy. Ivhabe a question about 1 thing. I don't understand line 20.. items:json. What is json? Variable? Where does it come from? Or does it come from an arrow function?

[@alesklasek2308]

adding return to the 1st .then(...), solves the problem:
---------------------------------------------------------------------------------------------------
componentDidMount() {
fetch("jsonplaceholder.typicode.com/users")
.then(response => {
return response.json();
})
.then(json => {
console.log(`received data:`, json);
this.setState({
isLoaded: true,
users: json
});
});
}

[@thepleasantdiariesridhi1567]

Hi
I have a collapsible in the HTML, and exactly similar code as you have shown here.
I have 5 such components each calling an API response. All components call API on the load of the page.
Like if API is responding 10 records then, i get 50 responses on each load.
My question : is it possible to call the API only when user click on the collapsible header? So that My API responds only 10 on demand and not on each load.

[@westfield90]

Very helpful. Thank you

[@Soap_js]

Thanks man 🤘

[@culturapoliticaycomputador9999]

Thank you for this great video.🙏👌

[@FullstackDevelopment]

You are welcome

[@Anonimousxz]

Many nice, thanks! :D

[@FullstackDevelopment]

Thanks!

[@DanielaBarrientos]

Genius explenation! Great job Sr!! Thanks *1M

[@FullstackDevelopment]

Thanks!

[@shivamvora2285]

ruclips.net/video/nPCfL_fuUk4/видео.html
live linkedin code easy understand line by line

[@DOUBLE0SEVUN]

Does anyone know how I would write the fetch() is I were accessing an API with a Bearer token?

[@SudhirKumar-ov6ee]

hi, i wan to use camera plugin, as well as contact plugin in react native, but i did not understand how to use it, plz guide me with coding.....i iam using ubuntu with android phone.

[@TheBilverMax]

thx man, the best

[@be-kreidly1515]

very nice explanation method !

[@danielsimonney8888]

Thank you very much, very useful.

[@FullstackDevelopment]

Thanks!

[@sourabhdubey2668]

thank u and love .. now i know how to integrate api Hureeeeeeee

[@FullstackDevelopment]

Thanks!

[@sanketkushwaha4238]

thanks short and crisp .. :-)

[@rizvidhk]

really good work.. thanks

[@FullstackDevelopment]

Thanks!

[@centrumsaiyan7623]

After I have practice this. I think I am ready for my first frontend developer job.

[@alejandrocano88]

hey, did you et your first front.end job?

[@FullstackDevelopment]

Go for it!

[@pjalmeida8732]

Great job!

[@FullstackDevelopment]

Thanks!

[@ahmedbejaoui5015]

thank you for this

[@FullstackDevelopment]

Thank you!

[@ShankyBady]

Hi, can anybody help me out? I have done literally the same thing, I can get an error items.map is not a function. I'm confused.

[@FullstackDevelopment]

The map function work only on arrays, you are not retrieving an array hence the error.

[@abhisheksharma8210]

for anyone looking for this ..........for eg. the array (object) in your JSON data is named as "students",inside which you would have named all id,age,name etc............So basically now as map function work only on arrays so you have to do items.students.map

[@prathameshyerva248]

@@abhisheksharma8210 thanks man

[@rakeshreddy6719]

hi it is very helpful and i need how to store form values into db backend springboot front end react js....its very important for me...

[@vineet4991]

I hv a question. How do we connect our React app to backend like to Node js and then work on database maybe Mongo db. What if i don't wanna work with API then how?

[@krishnabagale]

Thank you sir!

[@FullstackDevelopment]

Thanks!

[@steliospapadopoulos4589]

What keyboard do you use? It sounds so dope!

[@chetankumars333]

I have blob http response, so I need to store this into cache and it will help to call for the second click within the period of time instead of calling API again

[@datasupervision943]

Hello,I did same as you but a blank page is shown.no any data.a warning in console contains, deliver cookies with cross-site-requests....What to do in this case.plz suggest.

[@andynguyen4676]

I did exactly like you instructed but data never fetched. I checked the webservice and data is returned from soapui as json format.

[@marceloamado6223]

What is the color of the switches of your keyboard?

[@rishikachowdarypotturu3488]

@Fullstack Development ...I've been getting error - Expected an assignment or function call and instead saw an expression no-unused-expressions..could you please help with it

[@horaciogabriel3269]

Have you writen the return method correctly? I had same error once and the cause was return function.

[@drisszabari8150]

it's working when i use the api in the video, but when i use my api which is in the localhost it doesn't function do u have any idea?

[@ferox6231]

Thank you sooo sook much for this, but how can i do this with function component?

[@saherahussein1086]

Hi, First of all, Thank you for all these informative videos.
I just want to ask you for a devise, I want to start learning React Native, So what's the RoadMap you are recommended to follow until I will be able to do a complete task from zero,
Also, can I working as a full time freelancer using it to built app , because in my country there is few to nothing jobs in this field.
I will be more than thankful for your answer and time (:

[@FullstackDevelopment]

Hi thanks! I just launched a forum for this channel where you can get more answers from other people and discuss your questions: fullstackdiscussion.com/. I try to respond to as many questions as possible but there are just too many at the moment as the channel is growing quickly.

[@kushaluk2381]

how to use for loop and dispaly only few names

[@thepigeonmen0]

could someone tell me how to retrieve data from edamam? there's plenty of tutorials on the 1st version but they've updated v2 and I can't get my head around it please help!

[@manasahr478]

How can we fetch data or table from sql server database to react application

[@pneumachill1872]

Error: Unexpected token < in JSON at position 0 - - The file that contains data is an XML
Plz help

[@AbhishekKashyap11]

change script type to "text/babel"

[@dungnguyenvan9164]

Tks you very much !

[@FullstackDevelopment]

You are welcome!

[@andyyatma3642]

How to set the api key on get method ?

[@shudyshudy8681]

thank you ver much

[@jephrennaicker4584]

is there a part 2? how do you access the address details?

[@pooranivijay4042]

What if I want to display one user from the array instead of listing everything?

[@khushboosharma9717]

You can use array filter() method to specify the condition.

[@alexk.9670]

How I can transfer that data in table?

[@issaabdulaziz7771]

But actually how the front end knows that url. I mean when he is building his app how can he knows actually the url that he should be using to fetch data.
Does the back end built before the front end so the back end tell the front end what are the URLs that he should be fetching to get the data from.
Or what's the case
Please help me guys I'm little confused

[@TruthSeekerClub]

Back-end trainee here.
Come to see how do you use my apis

[@FullstackDevelopment]

Nice!

[@brahimalloud9452]

thank you so much

[@FullstackDevelopment]

You are welcome!

[@fatemenikseresht3967]

thank you

[@thatchert2159]

I am getting items.map is not a function error

[@ryansyd4224]

i'm getting an error: TypeError: items.map is not a function

[@g43s]

my "isLoaded" variable is always undefined, anybody has the same issue?

[@devfaded9351]

I keep getting items.map is not a function, is this not how you do it anymore in React?

[@harmanpreetsingh3818]

maybe your api is not providing list of object diectly. So if there is any key in api where u r storing those object use that to access ex this.setState({data: json.list,isLoaded : true})

[@davisvlogs3896]

how to get array data from api as list?

[@nicky4111]

Thanks! And how to do it in separate component and send data here?

[@ShankyBady]

pass jason as props? does that work? I'm also learning so I'm only trying to firgure it out.

[@sam29sept]

TypeError: items.map is not a function

[@torrentinocom]

sam yoyo its no deal of this video. Its just about fetching data from api. You can use 'for' cycle instead. Or just display few items from items list, smths like
{items[0].name}
{items[1].name}
{items[2].name}
Every else nuances its just pure JS, but in this video author covered actually retrieving data from api.

[@jeffersonmayfield6701]

If you get .map is not a function, try adding the initial key name between data.map "data.keyname.map"

[@okoyechiamaka4103]

how pls

[@jeffersonmayfield6701]

@@okoyechiamaka4103 you're data will have a key value pair. Data.map can change depending on what your data is called. Try some different combos.

[@okoyechiamaka4103]

Can you show me what it should look like

[@jeffersonmayfield6701]

Provide the structure of your json

[@ChongHwi]

I like this video

[@FullstackDevelopment]

I like you

[@rishabhunlocked2693]

really nice content .....
how can I put api key in this code? like google places needs api key...

[@jitendarkumar-bl6yd]

best video

[@FullstackDevelopment]

Thanks!