Fetch data using Fetch API in React JS | Part-1 | React Basics
HTML-код
- Опубликовано: 1 дек 2020
- In this video, We're going to learn how to use Fetch API in React JS.
The fetch() API is an inbuilt JavaScript method for getting resources from a server or an API endpoint. We're going to see how to use this method in React JS.
In this video we are going to cover:
▶ What is Fetch API
▶ How to use fetch method in React
▶ How to use fetch for GET method
Visit below link to watch Part-2:
• Fetch data using Fetch...
In upcoming videos I'm going to cover lots of concepts of React, so do subscribe if you want to learn more!
Code of this tutorial can be found here:
github.com/codebucks27/React-...
Fetch API (Official Documentation):
developer.mozilla.org/en-US/d...
JSON placeholder API:
jsonplaceholder.typicode.com/
Like, Sub🥂 & Share! ♥
𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 : / code_bucks
LinkedIn 🔗: / codebucks
Instagram 📫: / code.bucks
Email 📧: codebucks27@gmail.com
Learn More About,
Conditional Rendering in React JS:
• Conditional Rendering ...
Forms in React JS:
• Form Handling in React...
Event Handling in React JS:
• Event Handling in Reac...
Lifecycle Methods in React JS:
• Lifecycle Methods in R...
Props in React:
• Props in React JS | Re...
Higher-Order Component (HOC) in React:
• Higher-Order Component...
Error Handling in React JS:
• Error Boundaries in Re...
Pure Components in React JS:
• Pure Component in Reac...
Refs in React:
• Refs in React JS | Adv...
Build Weather App in React Using React Hooks:
• Build a Weather App in...
Build a Rich text Editor in React
• Build a Text editor in...
React Advanced Topic Playlist:
• React Advanced Concept...
If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.
Thank You for watching! 😉
Where else you can find me:
Twitter🐤 : / code_bucks
LinkedIn 🔗: / codebucks
Instagram 📫: / code.bucks
Email 📧: codebucks27@gmail.com
#FetchAPI
#FetchAPIInReact
#APIInReact
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
wow man, thank you! I searched many videos and stack overflow but this is exactly what I was struggling with. Much respect.
Glad you liked it😄
Brooo! I love you!! This was so well explained and exactly what I wanted and was looking for. So on point and clearly explained. I appreciate you so much! 🙏thank you
Thanks for the appreciation.😄 Glad you liked it!
those who are in basics of react(how to fetch API) ,this video helps a lot them.Thanks Man
Glad to hear that!😄
You're Welcome😇.
you are my savior pedro! this is exactly what i need.
Glad it helped you 😇
Simple and clean. Thank you!
Glad it was helpful!
Simple and clear explanations! 👍
Glad it was helpful! 😄
I saw a lot of videos, but in this 6 minutes i understand a lot of thinks! I love your
accents man!:) Thank you a lot!
(I would like to suggest something: Line 28. Make a and store the "key={item.id} " there, because you can not get other data from the item (for example with an other li, or p.. "Warning: Each child in a list should have a unique “key” prop". If you do the ke on the li, and get the item.title, later if you want to get the body for examle, you will get error. )
{data.map((item) => (
{item.body}
{item.title}
)
)}
Thanks you so much for the appreciation. That means a lot😇
Alright👍, I got what you're trying to say, i'll keep that in mind. Thanks for the suggestion that's good observation btw!
That is really amazing ! Thanks a lot.
Glad you like it!
Great video!
Thanks!
Super
Thank you 🥳🥳
You’re welcome 😊
Thank you so so so much bro
Always welcome😁
When I use this "
{data.map(item =>
{item.title}
)}
"
'TypeError: data.map is not a function' error occurs
That means you are not getting the data, use console.log(data) to check it.
Thank you 🙏🙏🙏🙏
You're welcome 😄
Nice explanation 👍
Hey, Thanks😉
thanks alot man
you're welcome😄
Thanks man
Any time😇
what shall we do if we want to pt the data we fetched in a table and then we use that table for making some react components thanks
You can fetch and store the data in a context object by using a context API. Then you can use this data in any component you want within your whole application.
i cant express my feeling in words because I learn lots of things in one video and taking learning time is negligible.
Thank you for the appreciation 🍻. I'm glad to hear this😄
Dont work, i've; TypeError: Cannot read properties of undefined (reading 'map')
Don't know why i do the same, but data is empty.
I think the there is some problem when you set the data state. Log the data which comes from the api and then see if there is any problem with api or your function. If you couldn't solve it then share your code.
I think there is some problem when you set the data state. Log the data which comes from the api and then see if there is any problem with api or your function. If you couldn't solve it then share your code.
Json stringfy is error, response
json error, do i need intall npm json?
Hey, no but make sure you are using the right syntax. Also log the response first.
@@CodeBucks indeed, i corrected my syntax and now it is working thanks
Gracias
Hey, de nada😉
Thank you very much!
Why is it necessary to use key?
You're welcome bro.
Which key? When using the map function?
@@CodeBucks Yes
@@ilan19891 Key is required while you're using list/array structure, because React needs to know which list-item is modified and it will know from the unique key that we have given.
iam getting maximum call stack size exceeded
Make sure you are not calling the API again and again. It can happen when you update the state which leads to component re-rendering which leads to the API call again. Make sure you call API just once when the component is mounted.
Please make on video Redux tutorial
i have no error in code but on button click its not fetching data in console
Make sure to check that you have binded the required event with button.
Yaa now its fetching data..but before clicking on button 😅
@@gauravmane9287 Can you share your code?
Don't works on recharge because make render before fetch its ready
Hey, sorry I can't understand what you're saying, Can you elaborate more.
Data. Map is not working
What's the error you're getting? Can share code snippet or just log the value of data and make sure that data is coming from API