Error when destructuring a nested array from an object in React

Question

I'm encountering an issue when trying to access nested data from an object that I'm receiving from an API using the useContext hook in a React application. The error message I'm getting is: "Uncaught TypeError: Cannot read properties of undefined (reading 'forecastday')". Strangely, when I tried to access the same data using vanilla JavaScript, it worked without errors.

I suspect there might be something wrong with my Context.jsx file, but I can't pinpoint the exact issue.

OBJECT DATA

weatherReport = {
      "location": {object Data},
      "current": {object Data},
      "forecast": {
        "forecastday": [
          {
            "date": "2023-03-07",
            "date_epoch": 1678147200,
            "day": {
              "maxtemp_c": 36.1,
              "maxtemp_f": 97.0,
              "mintemp_c": 17.4,
              "mintemp_f": 63.3,
              "avgtemp_c": 25.6,
              "avgtemp_f": 78.1,
              "maxwind_mph": 9.6,
              "maxwind_kph": 15.5,
              "totalprecip_mm": 0.0,
              "totalprecip_in": 0.0,
              "totalsnow_cm": 0.0,
              "avgvis_km": 10.0,
              "avgvis_miles": 6.0,
              "avghumidity": 22.0,
              "daily_will_it_rain": 0,
              "daily_chance_of_rain": 0,
              "daily_will_it_snow": 0,
              "daily_chance_of_snow": 0,
              "condition": {
                "text": "Sunny",
                "icon": "//cdn.weatherapi.com/weather/64x64/day/113.png",
                "code": 1000
              },
              "UV": 7.0
            },
        },
}

React component code

import { useGlobalContext } from "../context"

const ForecastReport = () => {
  const { forecast: { forecastday: [...forecastday] } } = useGlobalContext()

  console.log(forecastday)

  return <div className="forecast-box">
    Forecast Report
  </div>
}

export default ForecastReport

error on console

"Uncaught TypeError: Cannot read properties of undefined (reading 'forecastday')

vanilla js

const {forecast:{forecastday:[...forecastday]}} = weatherReport

    console.log(forecastday);

console for vanilla js

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

[https://replit.com/@djbravo12/WeatherApplicationOpenWeatherorg#src/context.jsx](my repl link)

This might help: stackoverflow.com/questions/56108874/…

CodeThing
– CodeThing

2023-03-07 06:53:09 +00:00
Commented Mar 7, 2023 at 6:53 — CodeThing
– CodeThing, Commented Mar 7, 2023 at 6:53

Nayan Bhakhar · Accepted Answer · 2023-03-07 06:47:12Z

0

it's getting the error because when your page will refresh or render that time context data will be not set in the context state so. it's getting "Uncaught TypeError: Cannot read properties of undefined"

You need to write the condition when the context state value is stored then you will access it.

answered Mar 7, 2023 at 6:47

Nayan Bhakhar

622 silver badges8 bronze badges

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

Comments

John Detlefs · Accepted Answer · 2023-03-07 06:49:50Z

0

forecast probably isn't available yet and so you're getting undefined issues.

Try updating in a useEffect hook after confirming that forecast is defined.

You could do something like:

import { useState, useEffect } from "react";
import { useGlobalContext } from "../context";

const ForecastReport = () => {
  const { forecast } = useGlobalContext();
  const [forecastDay, setForecastDay] = useState(null);

  useEffect(() => {
    if (forecast) {
      setForecastDay(forecast.forecastday);
    }
  }, [forecast]);

  return (
    <div className="forecast-box">
      Forecast Report
    </div>
  );
};

You could then do whatever you like with forecastDay once it's value has changed from null.

answered Mar 7, 2023 at 6:49

John Detlefs

1,0371 gold badge9 silver badges17 bronze badges

1 Comment

Vineet Kujur Over a year ago

thanks! but I've used condition in fetching Data function to get data response.data ? setWeatherReport(response.data) :setWeatherReport([])

Firing Dev · Accepted Answer · 2023-03-07 06:55:58Z

I am sure, this issue occurs because of your context. So it will be much more clear when you share your context code.

By the way, I have tested this on my side. But works all fine.

Here is my code (App and Data Component).

// import context
import { DataContextProvider, useData } from "./contexts/DataContext";

const Data = () => {
  const {
    people: {
      users: [...usersInfo],
    },
  } = useData();
  console.log(usersInfo);
  return <div>hello Data</div>;
};

const App = () => {
  return (
    <div className="App">
      <DataContextProvider>
        <Data />
      </DataContextProvider>
    </div>
  );
};

export default App;

Here is my Data Context code.

import { createContext, useContext } from "react";

const initialData = {
  type: "chat",
  people: {
    users: [
      {
        name: "Kevin",
      },
      {
        name: "Rebecca",
      },
      {
        name: "Pavlo",
      },
    ],
  },
};

const dataContext = createContext();

const useData = () => useContext(dataContext);

const DataContextProvider = ({ children }) => {
  return (
    <dataContext.Provider value={initialData}>{children}</dataContext.Provider>
  );
};

export { DataContextProvider, useData };

Hope this will help.

Collectives™ on Stack Overflow

Error when destructuring a nested array from an object in React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related