Discussion on: Undefined Nested Object in REST API with React Hooks?

[Diego Sisto]

You should have 3 outputs. Is that undefined, undefined, undefined?
Can we get the full code?

[mitchelln11]

Unhandled Rejection (TypeError): Cannot read property '0' of undefined. Breaks the page, doesn't even log anything.

[Diego Sisto]

Can we see the code please? It could be a number of things.

[mitchelln11]

It is in React and uses hooks.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const LocalWeather = () => {
    const [openWeather, setWeather] = useState([]);

    useEffect(() => {
        axiosGet();
    }, []); //  Run once on load

    const axiosGet = () => {
        const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
        .then(data => setWeather(data.data));
    console.log(openWeather, openWeather.weather, openWeather.weather[0]);
    }

    return (
        <ul>
            <li>{openWeather.name}</li>
            <li>{openWeather.cod}</li>
            <li>{openWeather.id}</li>
            <li>{openWeather.timezone}</li>
            <li>{openWeather.dt}</li>
            <li>{openWeather.visibility}</li>
            <li>{openWeather.base}</li>
            {/* <li>{openWeather.current.weather[0].main}</li> */}
        </ul>
    );
}

export default LocalWeather;

The console.log in the axiosGet method is breaking the page.

[Diego Sisto]

Thanks!
Let's change the console.log(openWeather, openWeather.weather, openWeather.weather[0]); to be inside the then callback:

const axiosGet = () => {
      const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
      .then(data => {
        setWeather(data.data);
        console.log('Service data was', data.data);
      });
  }

That will give you an idea of what's actually stored in openWeather.

On the other hand, you got a current in the failing line. .current is used for react ref but not for state. Try removing that.

Good luck!

[mitchelln11]

Get the following:

Service data was Array(0)length: 0__proto__: Array(0)

I also removed the current. Thanks, I forgot I had that in there.

[Diego Sisto]

Seem like you get an empty array. Maybe you are getting an unexpected response, check chrome network console developers.google.com/web/tools/ch...
Maybe you don't need to data.data and just data. Keep console logging =)

[mitchelln11]

So somebody on a Slack channel figured this out for me.

When returning JSX:

<li>{openWeather.weather && openWeather.weather[0].main}</li>

This feels like a bug to me, but it does output the response from the REST API.

I am still getting a warning, which I am unsure why:

    const axiosGet = () => {
        const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=api-key`)
        .then(data => setWeather(data.data));
    }

It's saying Line 14:15: 'data' is assigned a value but never used no-unused-vars, although everything works. Aren't I setting the rest endpoint to data, and then using it when running the setWeather method?

[Diego Sisto]

Great that you figure it out!

Keep in mind that you get a first render before you get the data with openWeather as the default value passed in useState.

Maybe you can:

const LocalWeather = () => {
    const [openWeather, setWeather] = useState(null); // null obj instead of empty array

    useEffect(() => {
        axiosGet();
    }, []); //  Run once on load

    const axiosGet = () => {
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
        .then(data => setWeather(data.data));
    }

    if (!openWeather) return null; // empty render until we get data

    // if we get here we do have openWeather
    return (
        <ul>
            <li>{openWeather.name}</li>
            <li>{openWeather.cod}</li>
            <li>{openWeather.id}</li>
            <li>{openWeather.timezone}</li>
            <li>{openWeather.dt}</li>
            <li>{openWeather.visibility}</li>
            <li>{openWeather.base}</li>
            {openWeather.weather.map(item => 
              <li key={item.main}>{item.main}</li>
            )}
        </ul>
    );
}

no-unused-vars is because you are doing const data = and never use that data const. Not to be confused with the then data argument. Note I removed it in my example

[mitchelln11]

Sweet, works perfectly, i thought that data was the same thing as in the then argument. Works, no errors! Thank you so much for your help

[Diego Sisto]

Glad to read that! Keep up the good work!

[Gustavo Zapata]

I just spent hours trying to figure out what the issue was. Thanks to you guys (mitchelln11 and Diego Sisto) I was able to fix it.
My two cents:
Instead of if(!openWeather) return null;
I used {!openWeather && openWeather.weather.map(...) which will render the rest of the app and just ignoring this line.