CODEWITHSUNDEEP
arraysjsonreactjsuse-effect
Scott Green
Scott Green

Reputation: 13

Can't access Array in UseEffect return statement

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

Upvotes: 1

Views: 1193

Answers (2)

Dan Cantir
Dan Cantir

Reputation: 2955

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>

    );
}

Upvotes: 1

matthewninja
matthewninja

Reputation: 370

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

Upvotes: 0

Related Questions