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?