FAQ: The Effect Hook - Fetch Data

This community-built FAQ covers the “Fetch Data” exercise from the lesson “The Effect Hook”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn React

FAQs on the exercise Fetch Data

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I can’t seem to make heads or tails of this exercise, and I’m not sure if what’s happening is a bug with Codecademy’s assignment-completion system or some erroneous code on my behalf.

As soon as I get to Step 2, setData([response.data]); it appears that the whole thing crashes. Am I supposed to be inserting this section into the useEffect() hook? If so, why is it that calling setData() seemingly fails to update my data state, thereby preventing me from rendering the JSX portion of the exercise?

I can’t get much else to show up past the <p>Loading...</p> display. And confusingly, even though I can’t seem to get it to work, the system lets me continue to the next part of the exercise although it seems like I haven’t done the previous bit correctly…!

Are you inserting setData after the first or second alert?

Mine is structured as follows:

      alert('Response: ' + JSON.stringify(response,'',2));
      setData(response.data);

And its worked for me.

Below is what the useEffect looks like at the end of the lesson:

 useEffect(() => {
    alert('Requested data from server...');
    get(forecastType).then((response) => {
      alert('Response: ' + JSON.stringify(response,'',2));
      setData(response.data);
    });
  }, [forecastType]);

3.

Type in each of the notes’ input fields in our table. What do you notice? Why do you think this is happening?

Each time that we type in an input field, the component re-renders to show the new value of that field. Even though we don’t need any new data from the backend, our component is fetching new data after every render!

Use an empty dependency array to ensure that data is only fetched after our component’s first render.

I don’t see any rendered HTML in the http://localhost:8000/

I see no table or no opportunity to type in notes

return (


My Weather Planner



<button onClick={() => setForecastType(’/daily’)}>5-day
<button onClick={() => setForecastType(’/hourly’)}>Today











{data.map((item, i) => (






))}

Summary Avg Temp Precip Notes
{item.summary} {item.temp.avg}°F {item.precip}%
<input
value={notes[item.id] || ‘’}
onChange={handleChange(item.id)}
/>


);

Is it just me or are there several typos in this code that comes loaded on this lesson?
tbody?
thead?

Why am I not seeing any HTML elements?

The same issue is happening to me, i dont see any loaded html. my screen just proceeds to have a “loading…” text in it. at step 3 there was never any text inputs or buttons to click in the rendered html area More bugs? Did you figure out what was wrong?

What do I do in step 4? I don’t get it

Step 1 of the task is simple. My solution works, but the platform marks it as wrong. The source code of the stored solution is identical to the source code of the task.
What could be the problem?

1 Like

Did you figure this out? I am having the same problem: my solution works, and is the same as what is given in the hint, but the platform marks it as wrong.

Hi, It looks like I am in the same boat as you. Wonder if there is a way to reach the experts in Codecademy, those who wrote this lesson on ‘Fetch Data’ in ReactJS? Something is wrong in the sand box coding, I presume. The error reported is as follows,

“Oops! The test returned an error. Maybe you have a syntax error, or a typo. Hide error.”
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:

{
“stats”: {
“suites”: 0,
“tests”: 1,
“passes”: 1,
“pending”: 0,
“failures”: 0,
“start”: “2021-07-25T22:51:51.814Z”,
“end”: “2021-07-25T22:51:52.149Z”,
“duration”: 335
},
“tests”: [
{
“title”: “”,
“fullTitle”: " ",
“duration”: 331,
“currentRetry”: 0,
“err”: {}
}
],
“pending”: ,
“failures”: ,
“passes”: [
{
“title”: “”,
“fullTitle”: " ",
“duration”: 331,
“currentRetry”: 0,
“err”: {}
}
]
}

Does someone has an cheatsheet that I can take advantage of? Im struggling with this topic

OH thank goodness!!! The strugs with this are real… I’m struggling with step 3 and I get for some reason two cycles of the weather alerts…and not that it matters but I followed the directions to the best of my abilities… It would be cool if the solution code showed you the solution in increments instead of the whole thing. I’d like to see what my own glitch is in comprehension. :upside_down_face: