'why I can't access the nested data in state
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
}
Solution 1:[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.
Solution 2:[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
fetchDatasince 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
}
Solution 3:[3]
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])
Solution 4:[4]
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])}
Solution 5:[5]
indside Constructor you have defined data as string and assigning array of objects.
small change : data: '' to data: []
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | |
| Solution 3 | harisu |
| Solution 4 | syjsdev |
| Solution 5 | Rakesh |