Twitch TV Problems

React is driving me nuts, and my Twitch app has a couple problems I’m having trouble resolving and hoping someone can help point me in the right direction.

1.) The online status sometimes comes back as undefined. I suspect this is because I’m doing separate calls to get streams and channels, then updating status based on if a channel has a stream result, which depending on API responses could be inconsistent. So now I’m trying something like this, but…

// hit the API, get data
if (Array.isArray(channel)) {
  for (var i = 0; i < channel.length; i++) {
console.log(channels) // returns array, length 7
console.log(channels.length) // returns 0 -- what?!
for (var i = 0; i < channels.length; i++) { // this never executes
  if (streams.filter(stream => channels[i].game === {
    channels[i].channelStatus = 'Online';
  else {
    channels[i].channelStatus = 'Offline';
// channels is empty here, so state doesn't update
this.setState({ channels, streams });

2.) Similarly, the Channels component is set up such that it should render an initial state displaying all Channel components regardless of status, but a similar thing happens – the props are there right before the loop, but the loop to iterate through the channels never executes.


Can someone save me from my impending insanity?

I was able to figure it out, and it was a passing thought I had had – that the API calls to channels and streams needed to be nested, so that once the channel request was complete, the stream request could occur following it. So as has tripped me up before, JavaScript kept going, despite Chome Developer Tools spitting out a full channels array, then immediately telling me that array was empty. The built in debugger tipped me off to the truth – and I thought I could trust dev tools’ console!

Now off to figure out how to get the initial state to list all channels. I would delete this post if I could, but it seems I can’t. Thanks for listening! :stuck_out_tongue: