Passing API data through React

Question

I've got a function getData() that grabs a JSON object of the current weather conditions. While I can see the JSON object in the console, I can't seem to pass it to a usable variable. What am I missing here?

const getData = () => {
  let url = `https://api.openweathermap.org/data/2.5/weather?q=Asheville&appid=${key}`
  fetch(url)
      .then((response) => {
        return response.json();
      })
      .then((response) => {
         console.log(response);
      })
      .catch((err) => {
        console.log(err);
      })
}

function App() {
  let data = getData();
  console.log(data);
  return (
    <div className="App">
      <Forecast />
    </div>
  );
}

I've tried it a couple ways and can't get it to work. Also for some reason it logs in the console twice and I'm not sure why. Any advice is greatly appreciated!

I guess you're in the same class as stackoverflow.com/questions/68705249/failed-to-fetch? --- See also Fetch data inside useEffect hook before rendering - React — evolutionxbox
– evolutionxbox, Commented Aug 8, 2021 at 23:08
Woah just saw your comment on here, still new to SO. This is very helpful thank you so much! First link is a great example. — dishbin
– dishbin, Commented Aug 8, 2021 at 23:37

Daisho Arch · Accepted Answer · 2021-08-08 23:18:00Z

1

You can use react hooks

const useGetData = () => {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let url = `https://api.openweathermap.org/data/2.5/weather?q=Asheville&appid=${key}`;
    fetch(url)
      .then((response) => response.json())
      .then((response) => setData(response))
      .catch((err) => setError(err));
  }, []);

  return [data, error];
};

function App() {
  let [data, error] = useGetData();

  return (
    <div>
      <p>{JSON.stringify(data, null, 2)}</p>
      {error && <p>There's been an error: {error}</p>}
    </div>
  );
}

answered Aug 8, 2021 at 23:18

Daisho Arch

5292 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dishbin Over a year ago

Ok, thank you I'll go do some research on hooks.

Daisho Arch Over a year ago

@dishbin If you find my answer useful, you should mark it as correct.

evolutionxbox Over a year ago

@dishbin remember to use an if statement to check if data exists before rendering.

Collectives™ on Stack Overflow

Passing API data through React

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related