0

I'm trying to access the nested arrays and objects stored in this.state.data. But I can't access the arrays can anyone tell me why? Can anyone why the error "Cannot read property '0' of undefined" is keep popping up. This error is making me crazing. I don't understand why this keep coming.

import React from 'react';

const url="https://pixabay.com/api/?key=13565216-b3f251bf75153fd651dec947c&q=yellow+flowers&image_type=photo&pretty=true";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      input : '',
      data: '',
      isloading: true
    }
    this.fetchData=this.fetchData.bind(this);
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    fetch(url)
    .then(res=>res.json())
    .then(result=>{
      this.setState({
        data:result,
        isloading: false
      })
    });
  }

  render(){
    return(
      <>
      {
        console.log(this.state.data.hits[0])
      }
      </>
    );
  }
}

export default App;

the json data is here:

{
    "totalHits":500,
    "hits":[
        {
            "largeImageURL":"https://pixabay.com/get/55e0d340485aa814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":1008,
            "imageWidth":6000,
            "id":3063284,
            "user_id":1564471,
            "views":651677,
            "comments":226,
            "pageURL":"https://pixabay.com/photos/rose-flower-petal-floral-noble-3063284/",
            "imageHeight":4000,
            "webformatURL":"https://pixabay.com/get/55e0d340485aa814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"rose, flower, petal",
            "downloads":416283,
            "user":"annca",
            "favorites":873,
            "imageSize":3574625,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2015/11/27/06-58-54-609_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/01/05/16/24/rose-3063284_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e1d4404953a414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":788,
            "imageWidth":2736,
            "id":3113318,
            "user_id":7410713,
            "views":433603,
            "comments":123,
            "pageURL":"https://pixabay.com/photos/sunflower-nature-flora-flower-3113318/",
            "imageHeight":1824,
            "webformatURL":"https://pixabay.com/get/55e1d4404953a414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflower, nature, flora",
            "downloads":318174,
            "user":"bichnguyenvo",
            "favorites":526,
            "imageSize":1026006,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2017/12/16/10-28-39-199_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/01/28/11/24/sunflower-3113318_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/54e2dc464e51a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":789,
            "imageWidth":5363,
            "id":2295434,
            "user_id":334088,
            "views":127443,
            "comments":60,
            "pageURL":"https://pixabay.com/photos/spring-bird-bird-tit-spring-blue-2295434/",
            "imageHeight":3575,
            "webformatURL":"https://pixabay.com/get/54e2dc464e51a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"spring bird, bird, tit",
            "downloads":56295,
            "user":"JillWellington",
            "favorites":880,
            "imageSize":2938651,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2018/06/27/01-23-02-27_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295434_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e2dc414351ae14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":400,
            "webformatWidth":640,
            "likes":733,
            "imageWidth":3200,
            "id":3292932,
            "user_id":2216431,
            "views":366876,
            "comments":65,
            "pageURL":"https://pixabay.com/photos/sunflower-vase-vintage-retro-wall-3292932/",
            "imageHeight":2000,
            "webformatURL":"https://pixabay.com/get/55e2dc414351ae14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":93,
            "tags":"sunflower, vase, vintage",
            "downloads":283271,
            "user":"Yuri_B",
            "favorites":946,
            "imageSize":2563708,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2018/01/15/10-52-15-382_250x250.png",
            "previewURL":"https://cdn.pixabay.com/photo/2018/04/05/14/09/sunflower-3292932_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/51e1d0464e52b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":360,
            "webformatWidth":640,
            "likes":295,
            "imageWidth":3020,
            "id":715540,
            "user_id":916237,
            "views":96804,
            "comments":33,
            "pageURL":"https://pixabay.com/photos/yellow-natural-flower-blossom-715540/",
            "imageHeight":1703,
            "webformatURL":"https://pixabay.com/get/51e1d0464e52b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":84,
            "tags":"yellow, natural, flower",
            "downloads":48832,
            "user":"Wow_Pho",
            "favorites":309,
            "imageSize":974940,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2015/04/07/14-10-15-590_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2015/04/10/00/41/yellow-715540_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e5d4414253af14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":323,
            "webformatWidth":640,
            "likes":294,
            "imageWidth":3861,
            "id":1512813,
            "user_id":2364555,
            "views":82697,
            "comments":23,
            "pageURL":"https://pixabay.com/photos/lily-flowers-early-flower-garden-1512813/",
            "imageHeight":1952,
            "webformatURL":"https://pixabay.com/get/57e5d4414253af14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":75,
            "tags":"lily, flowers, early",
            "downloads":40483,
            "user":"pixel2013",
            "favorites":305,
            "imageSize":1037708,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/15/18-51-07-612_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/07/12/18/54/lily-1512813_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/54e1d1464f51a514f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":390,
            "webformatWidth":640,
            "likes":413,
            "imageWidth":4000,
            "id":2145539,
            "user_id":2364555,
            "views":53994,
            "comments":31,
            "pageURL":"https://pixabay.com/photos/crocus-flower-wet-spring-2145539/",
            "imageHeight":2443,
            "webformatURL":"https://pixabay.com/get/54e1d1464f51a514f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":91,
            "tags":"crocus, flower, wet",
            "downloads":31006,
            "user":"pixel2013",
            "favorites":388,
            "imageSize":823922,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/15/18-51-07-612_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2017/03/15/09/00/crocus-2145539_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e5d6454a5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":419,
            "webformatWidth":640,
            "likes":296,
            "imageWidth":4896,
            "id":1536088,
            "user_id":1195798,
            "views":290456,
            "comments":57,
            "pageURL":"https://pixabay.com/photos/sunflower-flower-bloom-yellow-1536088/",
            "imageHeight":3208,
            "webformatURL":"https://pixabay.com/get/57e5d6454a5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":98,
            "tags":"sunflower, flower, bloom",
            "downloads":51793,
            "user":"Couleur",
            "favorites":269,
            "imageSize":5103399,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/30/15-24-04-643_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/07/23/00/12/sun-flower-1536088_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e2d4464b5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":358,
            "webformatWidth":640,
            "likes":375,
            "imageWidth":2027,
            "id":3215188,
            "user_id":7097598,
            "views":151068,
            "comments":98,
            "pageURL":"https://pixabay.com/photos/flowers-orange-orange-petals-3215188/",
            "imageHeight":1134,
            "webformatURL":"https://pixabay.com/get/55e2d4464b5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":83,
            "tags":"flowers, orange, orange petals",
            "downloads":103336,
            "user":"Candiix",
            "favorites":314,
            "imageSize":399066,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2017/12/06/20-08-45-84_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/03/10/20/26/flowers-3215188_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/51e2dc464b57b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":416,
            "webformatWidth":640,
            "likes":334,
            "imageWidth":1980,
            "id":729515,
            "user_id":909086,
            "views":48785,
            "comments":21,
            "pageURL":"https://pixabay.com/photos/flower-beautiful-bloom-blooming-729515/",
            "imageHeight":1288,
            "webformatURL":"https://pixabay.com/get/51e2dc464b57b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":97,
            "tags":"flower, beautiful, bloom",
            "downloads":31414,
            "user":"Bessi",
            "favorites":429,
            "imageSize":370390,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/04/11/22-45-05-994_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729515_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/53e6d1424e4fad0bffd8992cc62b3278103ddfe34e50744f7c2b78dc9648c7_1280.jpg",
            "webformatHeight":428,
            "webformatWidth":640,
            "likes":538,
            "imageWidth":3872,
            "id":56414,
            "user_id":9003,
            "views":77521,
            "comments":82,
            "pageURL":"https://pixabay.com/photos/anemone-flower-blossom-bloom-blue-56414/",
            "imageHeight":2592,
            "webformatURL":"https://pixabay.com/get/53e6d1424e4fad0bffd8992cc62b3278103ddfe34e50744f7c2b78dc9648c7_640.jpg",
            "type":"photo",
            "previewHeight":100,
            "tags":"anemone, flower, blossom",
            "downloads":32632,
            "user":"Albenheim",
            "favorites":458,
            "imageSize":770723,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2012/09/08/21-14-56-990_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2012/09/08/21/51/anemone-56414_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e1d7444b55a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":448,
            "imageWidth":4752,
            "id":1127174,
            "user_id":1445608,
            "views":132295,
            "comments":31,
            "pageURL":"https://pixabay.com/photos/sunflower-summer-yellow-nature-1127174/",
            "imageHeight":3168,
            "webformatURL":"https://pixabay.com/get/57e1d7444b55a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflower, summer, yellow",
            "downloads":78186,
            "user":"mploscar",
            "favorites":469,
            "imageSize":3922163,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2016/01/05/14-08-20-943_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/01/08/05/24/sunflower-1127174_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e1d6444957b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":355,
            "webformatWidth":640,
            "likes":208,
            "imageWidth":2410,
            "id":113735,
            "user_id":817,
            "views":102849,
            "comments":31,
            "pageURL":"https://pixabay.com/photos/rose-flower-yellow-yellow-rose-113735/",
            "imageHeight":1337,
            "webformatURL":"https://pixabay.com/get/57e1d6444957b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":83,
            "tags":"rose, flower, yellow",
            "downloads":19187,
            "user":"blizniak",
            "favorites":193,
            "imageSize":299425,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2013/06/28/17-07-05-714_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2013/05/26/12/14/rose-113735_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e9d2414e53ad14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":372,
            "webformatWidth":640,
            "likes":285,
            "imageWidth":4288,
            "id":1972411,
            "user_id":1777190,
            "views":93782,
            "comments":35,
            "pageURL":"https://pixabay.com/photos/drip-blossom-bloom-yellow-1972411/",
            "imageHeight":2499,
            "webformatURL":"https://pixabay.com/get/57e9d2414e53ad14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":87,
            "tags":"drip, blossom, bloom",
            "downloads":78762,
            "user":"susannp4",
            "favorites":285,
            "imageSize":1510459,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2015/12/16/17-56-55-832_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2017/01/11/17/27/drip-1972411_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/5ee8d2474e51b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":497,
            "webformatWidth":640,
            "likes":429,
            "imageWidth":3867,
            "id":887443,
            "user_id":1298145,
            "views":82485,
            "comments":49,
            "pageURL":"https://pixabay.com/photos/flower-life-crack-desert-drought-887443/",
            "imageHeight":3005,
            "webformatURL":"https://pixabay.com/get/5ee8d2474e51b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":116,
            "tags":"flower, life, crack",
            "downloads":41067,
            "user":"klimkin",
            "favorites":351,
            "imageSize":2611531,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2017/07/18/13-46-18-393_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2015/08/13/20/06/flower-887443_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e7d743495aaf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":186,
            "imageWidth":6000,
            "id":3720383,
            "user_id":6246704,
            "views":59481,
            "comments":42,
            "pageURL":"https://pixabay.com/photos/flower-g%C3%A9rbel-yellow-flower-flower-3720383/",
            "imageHeight":4000,
            "webformatURL":"https://pixabay.com/get/55e7d743495aaf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"flower g\u00e9rbel, yellow flower, flower",
            "downloads":48052,
            "user":"fernandozhiminaicela",
            "favorites":160,
            "imageSize":2117262,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/02/27/14-16-13-192_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/10/03/03/42/flower-gerbel-3720383_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e6d1434351a914f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":339,
            "imageWidth":5574,
            "id":3640935,
            "user_id":334088,
            "views":176477,
            "comments":63,
            "pageURL":"https://pixabay.com/photos/sunflowers-field-woman-yellow-3640935/",
            "imageHeight":3717,
            "webformatURL":"https://pixabay.com/get/55e6d1434351a914f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflowers, field, woman",
            "downloads":145783,
            "user":"JillWellington",
            "favorites":308,
            "imageSize":4970597,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2018/06/27/01-23-02-27_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/08/29/22/52/sunflowers-3640935_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e6d7444b5baf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":285,
            "imageWidth":6000,
            "id":1627193,
            "user_id":1834854,
            "views":111905,
            "comments":42,
            "pageURL":"https://pixabay.com/photos/sunflower-sunflower-field-yellow-1627193/",
            "imageHeight":4000,
            "webformatURL":"https://pixabay.com/get/57e6d7444b5baf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflower, sunflower field, yellow",
            "downloads":33145,
            "user":"ulleo",
            "favorites":335,
            "imageSize":5414839,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/05/16/18-48-21-135_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/08/28/23/24/sunflower-1627193_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e5d1434854aa14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":437,
            "webformatWidth":640,
            "likes":247,
            "imageWidth":5500,
            "id":3540266,
            "user_id":2364555,
            "views":85177,
            "comments":37,
            "pageURL":"https://pixabay.com/photos/sunflower-flower-blossom-bloom-3540266/",
            "imageHeight":3760,
            "webformatURL":"https://pixabay.com/get/55e5d1434854aa14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":102,
            "tags":"sunflower, flower, blossom",
            "downloads":74877,
            "user":"pixel2013",
            "favorites":249,
            "imageSize":4179978,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/15/18-51-07-612_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/07/15/19/02/sun-flower-3540266_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e3d44a4b53a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":288,
            "imageWidth":4272,
            "id":1319114,
            "user_id":485024,
            "views":99904,
            "comments":25,
            "pageURL":"https://pixabay.com/photos/girl-flowers-yellow-beauty-nature-1319114/",
            "imageHeight":2848,
            "webformatURL":"https://pixabay.com/get/57e3d44a4b53a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"girl, flowers, yellow",
            "downloads":48347,
            "user":"AdinaVoicu",
            "favorites":292,
            "imageSize":3837334,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/18/16-54-09-399_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/04/09/23/10/girl-1319114_150.jpg"
        }
    ],
    "total":21247
}
Sonu Nigam
  • 279
  • 1
  • 7
  • You can only log if loading is false, before that the data does not exist yet. – HMR Sep 25 '19 at 19:15
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – HMR Sep 25 '19 at 19:15
  • what? none of that has anything to do with the problem – rlemon Sep 25 '19 at 19:16
  • this.state.data is logging but this.state.data.hits[0] is not. – Sonu Nigam Sep 25 '19 at 19:16

5 Answers5

2

The problem is your initial value in state which is data: '', a string value which will throw error during first render while executing this.state.data.hits[0].

To fix this issue you can change your initial state to something like below

    this.state = {
      input : '',
      data: {
        hits: []
      ,
      isloading: true
    }

Suggestions:

  • You don't need to bind the method fetchData since it's called in same scope

If you remove this bind then you don't even need constructor and you can replace the whole constructor with below code

    state = {
      input : '',
      data: { hits: [] },
      isloading: true
    }
Milind Agrawal
  • 2,724
  • 1
  • 13
  • 20
1

During Innitial render data is just and empty string and trying to access the hits[0] is undefine infact the this.state.data.hits is undefined by itself so you can first of all check before accessing it something like the following 

console.log( this.state.data.hits && this.state.data.hits[0])
harisu
  • 1,376
  • 8
  • 17
1

(Please see interesting comments below as to whether it is better to conditionally call the console.log() or to create an initial state that matches the data structure that you will be expecting. The code in my answer does work; however, some experienced devs recommend another way, in order to follow best practices for error handling).

The render method is running before the data is fetched, so at that point, your data is equal to an empty string.

You can put a conditional statement, so that it only does a console.log() when the data has been stored:

render(){
   return(
      <div>
       {
          this.state.data && this.state.data.hits &&  console.log(this.state.data.hits[0])
        }
      </div>
);

}

If there is no this.state.data, the code will not go past the next && operator. But you need to also check if the data object has a "hits" property, so you write another && operator for this. Console.log() is not "falsy" so it will run.

Maiya
  • 932
  • 2
  • 10
  • 26
  • This might resolve the crash issue but instead of doing this much safety check, we should correct the initialState which is not having expected data. If it is created to have an object then the default should be `{}` not `''`. – Milind Agrawal Sep 25 '19 at 19:34
  • Also we add safety check to make sure nothing breaks in any cases. Here the final code expects `hits[0]` an array, so the safety check should make sure that we have array in it before executing. Current condition will execute it if the value of hits is `{}`. – Milind Agrawal Sep 25 '19 at 19:37
  • @MilindAgrawal Yes, it will run, but it will log "undefined." Isn't that okay, since they are just checking if it is there, and not rendering it? – Maiya Sep 25 '19 at 19:44
  • @MilindAgrawal Also, what if the data that will be on the state is very large and nested, and we can not predict ahead of time exactly what would be there, in order to create an empty shell version. Is it not okay to render conditionally based on certain properties being there? – Maiya Sep 25 '19 at 19:45
  • We can do it but it's not just about resolving the issue when we know that there is a proper fix. – Milind Agrawal Sep 25 '19 at 19:46
  • If the initialState is handled properly then the only possible case for crash is when the results returned from server is not correct. I personally avoid safety checks in these places because it then allows a developer to know what went wrong. They will immediately find out that API is returning wrong data without these generic safety check and they can ask them to correct it instead of debugging client side code. – Milind Agrawal Sep 25 '19 at 19:49
  • Ok. I put a comment in the answer, so that people will read your feedback, but am leaving it up because some people don't seem to be aware of the conditional rendering, and should have it as an option, if needed. Thanks for info. – Maiya Sep 25 '19 at 20:37
  • 1
    Thank you and appreciate your effort. – Milind Agrawal Sep 25 '19 at 20:40
0

this.fetchData() is asynchronous which means sending the request (or rather receiving the response) is taken out of the normal execution flow. so, the render() function calls before the data has received.

Solution

check if the this.state.data or this.state.data.hits is null.

{this.state.data.hits && console.log(this.state.data.hits[0])}

syjsdev
  • 1,326
  • 1
  • 9
  • 22
0

indside Constructor you have defined data as string and assigning array of objects. small change : data: '' to data: []

Rakesh
  • 59
  • 3