React Beginners Challenge - Fetch API Data | React JS Beginners Project

In this two part React Beginners Challenge, you will use a fake REST API to fetch API data with the useEffect hook. But wait! The challenge is not that simple... you will need to manage React state, apply click events, and build functional components, too.

🚀 This lesson is part of a Learn React tutorial series playlist:

React Beginner Challenge - Fetch API Data | React JS Beginners Project

(00:00) Intro
(00:05) Welcome
(00:14) React Beginners Challenge - Part A
(02:27) Hints and Helpers for Part A
(03:42) Solution Setup
(05:58) Solution for Part A
(25:53) React Beginners Challenge - Part B
(27:07) Hints and Helpers for Part B
(28:51) Solution for Part B

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this React Beginners Challenge / Project tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #beginners #challenge

[mohammedalsumri]

this might be 3 years too late but i love those challenges they make me use my brain and not get stuck on just following steps

[wdwaleed]

I did it without the hints and this was my approach: Create a state variable "mainData" which consisted of a list that was to be updated every time a nav item was clicked. I created three different functions called fetchUsers, fetchPosts, and fetchComments and added them as onClicks to the appropriate nav item. These fetch functions basically fetched the required data from jsonplaceholder

[ahmad-murery]

Nice challenge, it recaps all what we've learned so far,
The only thing I might change is using a separate property to specify the request type for the Button component, this way we can set an image or a text in different language on the button without affecting the actual resource url,

Great video as always,
Thanks Dave,

[blaircfleming]

Just finished the challenge and managed both parts before listening to the hints. One hiccup I had was in part B I used Object.values instead of Object.entries when mapping out the table data cells in the row component. The app still worked but I got a console error "Warning: Each child in a list should have a unique 'key' prop." I guess this was the result of not pulling through each key and applying it to the cell component. Learning lots on this series, thanks again Dave!

[harag]

Great video, thanks I didn't break down my components as much as yours, I did TR then did a map within that to do TDs but really like how you broke it down into several components, Row / Cell etc. Great stuff. The other issue I can't get my head around just yet is I'm writing JS code within the TSX area. e.g. return (<tr> {for(let i = 0; i<10; i++){console.log(i)}} </tr>)

[Drakan]

Hi Dave!
Question about the solution you chose to implement:

_Is there a specific reason why you decided to use a "Form" component for the buttons / view changes?_

Is it because the application does an actual "GET" request, therefore keeping it as a form-action is more "standardized?"
... or am I missing something? Personally just used generic button clicks (sans-form).

[zakariachajia]

great video a bit complicated but it gets easier

[lavitzwind]

I think you forgot to add the GitHub link for this project in the description section.

[terezachudejova]

Why do you use stringify, when it's already in JSON format? I thought that when I retrieve JSON data from API, I need to use parson to display it / work with them properly in React. And when I need to send data from React to API, I use stringify. But we were retrieving data from API and displaying them in JSON, so why stringify? (Neither stringify nor parse make sense for me in this case) Thanks

[anangyoga]

thank you, Dave! thank you very much!

[basamalhassan]

Hi Dave!! Please does this react series contain context and redux?

[malikal-sneeh]

there is no Github link in the description

[yogasanthosh]

Hey dave can please help me to how to fetch response status exception (i.e) 400 bad request ("message") from spring boot to react js

I try for 1 week but i wont get it please help me to find out or please make the video for this

[irfansaeedkhan]

not very good practice to do api calls inside useEffect