Can't access Array in UseEffect return statement

Question

I am fetching data in React using axios inside a useEffect hook. When I console log the data from inside the useEffect hook everything is fine, but when I attempt to access it in the return statement, it returns Cannot read property 'Con' of undefined.

Here is my code:

    import React, { useState, useEffect } from "react";
import axios from 'axios'
import './App.css';

export default function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/comRes', {headers:{"Access-Control-Allow-Origin": "http://localhost:3000/"}})
  .then(function (data) {

    setData(data.data);
console.log(data.data.Con[0])

   })}, []);

  return (

    <div className="grid-container">
    <div className="menu"></div>
  <div className="dashboard">{data.data.Con[0]}</div>
  </div>

  );

this is the console.log of of the whole datset:

{_id: "5e85c1241c9d440000e730c7", Con: Array(30), Lab: Array(30), LibDem: Array(30), Other: Array(30), …}
_id: "5e85c1241c9d440000e730c7"
Con: (30) [47, 50, 44, 33, 35, 41, 43, 54, 63, 34, 42, 59, 49, 48, 52, 39, 39, 45, 32, 39, 49, 43, 37, 47, 50, 46, 57, 45, 57, 56]
Lab: (30) [31, 28, 34, 47, 42, 33, 35, 23, 19, 44, 34, 21, 28, 29, 34, 36, 39, 31, 11, 29, 33, 45, 52, 41, 30, 38, 28, 29, 25, 22]
LibDem: (30) [9, 9, 10, 9, 11, 11, 8, 8, 9, 10, 9, 9, 14, 9, 4, 8, 8, 10, 6, 5, 10, 8, 5, 7, 11, 7, 9, 14, 11, 14]
Other: (30) [0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0]
Brexit: (30) [3, 3, 2, 0, 3, 2, 4, 3, 1, 2, 3, 2, 1, 2, 4, 4, 2, 4, 1, 4, 3, 3, 2, 2, 5, 3, 2, 4, 1, 3]
Green: (30) [4, 4, 4, 6, 3, 5, 5, 5, 2, 4, 5, 3, 4, 4, 3, 4, 4, 5, 3, 1, 4, 2, 3, 3, 4, 5, 4, 8, 4, 5]
SNP: (30) [4, 5, 4, 4, 4, 8, 3, 6, 3, 4, 5, 4, 3, 4, 4, 6, 6, 3, 47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Plaid: (30) [1, 1, 1, 0, 1, 1, 1, 2, 1, 1, 1, 2, 0, 2, 0, 1, 2, 1, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Date: "20/02/2020"
__proto__: Object

This is the eror report when I try to access {Data.Con[0]} from the return statement:

TypeError: Cannot read property '0' of undefined

Comments are not for extended discussion; this conversation has been moved to chat. — Samuel Liew
– Samuel Liew, Commented Apr 3, 2020 at 1:25

Dan Cantir · Accepted Answer · 2020-04-02 14:23:32Z

1

First time when your component renders, the data might not be there yet.

My suggestion would be to set the data to null by default, so change this line

const [data, setData] = useState([]);

to

const [data, setData] = useState(null);

Then, before trying to rendering something, check it is there

<div className="dashboard">{data ? data.Con[0] : null }</div>

If you will still have issues, you might want to post the axios's response data structure.

Update #1

import React, { useState, useEffect } from "react";

import axios from 'axios'
import './App.css';

export default function App() {
    const [data, setData] = useState();

    useEffect(() => {
        axios.get('/api/comRes', { headers: 
            { "Access-Control-Allow-Origin": "http://localhost:3000/" } 
        }).then(function (data) {
                setData(data.data);
            })
    }, []);

    return (
        <div className="grid-container">
            <div className="menu"></div>
            <div className="dashboard">{data ? data.Con[0] : null}</div>
        </div>

    );
}

edited Apr 2, 2020 at 14:23

answered Apr 2, 2020 at 13:07

Dan Cantir

2,96517 silver badges25 bronze badges

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

5 Comments

Scott Green Over a year ago

the data is there, because I can render the whole dataset in the <div> by using <div>{JSON.stringify(data)}</div>, but I cannot access any of the items.

ParthS007 Over a year ago

@Dan If you are setting the data by null as default, then you don't have to add the ternary operator in the div, it will be null if data is not changed.

Dan Cantir Over a year ago

@ParthS007, nope, the if is there to avoid calling .Con on null

Dan Cantir Over a year ago

@ScottGreen, please see my update#1, just copy this code and try it.

Scott Green Over a year ago

@DanCantir update#1 works!!!!!! wow! Amazing, thanks Dan - so what was the issue? what was causing the error

matthewninja · Accepted Answer · 2020-04-02 12:54:46Z

0

It should just be {data.Con[0]}

answered Apr 2, 2020 at 12:54

matthewninja

3706 silver badges21 bronze badges

1 Comment

Scott Green Over a year ago

when I try {data.Con[0]} I get the same result. - cannot access property 'Con' of undefined. whichever formualation I use, I cannot access the Array from the return statement. It's driving me nuts! I have tried JSON stringifying it as well but it just gives me error messages whichever wy I try to access it.

Collectives™ on Stack Overflow

Can't access Array in UseEffect return statement

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related