Map comments from Twitch API - React

Question

I'm having trouble mapping comments / results from a Twitch API. I'm getting a TypeError when I try to map, and the results being stored from the API are capping at 60 records, and I cannot find a way to keep mapping past that.

Below is my Component that is handling the API call and mapping...

import React from 'react';
import ReactDOM from 'react-dom';

class Twitch extends React.Component{

 constructor(props){
  super(props);
  this.state = {
    cid : 'XXXXXXXXXXXXX',
    api : 'https://api.twitch.tv/v5/videos/XXXXXXX/comments?client_id=' + this.state.cid,
    hits : []
  }
 }

 componentDidMount() {
  fetch(this.state.api, {
    method: 'get',
    headers: {"Client-ID": this.state.cid}
  })
  .then((response) => response.text())
   .then((responseText) => {
     this.setState({hits : (JSON.parse(responseText))})
    })
  }

 render(){
  const { hits } = this.state;
  console.log({hits});

  return (
   <ul>
     {hits.map(hit =>
      <li>
        <p>{hit.content_type}</p>
      </li>
     )}
   </ul>
  );
 }
}

I am getting the following result in my console which is good, but when I try to map I'm getting the error "TypeError: hits.map is not a function".

Also, the results i'm getting from the Twitch API always caps at 60 records and then has a '_next' field at the bottom. I can't seem to find a way to continue mapping records past the 60 mark.

Any help would be greatly appreciated. Thanks!

Ji aSH · Answer 1 · 2019-02-20T14:51:11.693

hits.map is not a function because according to your console output the array is under hits.comments

try hits.comments.map and it should be fine

edit : since you initialize state.hits as [], state.hits.comments will be undefined initially. Ever check the precense of hits.comments or change your initial value :)

regarding the 60 caps, this seems to be du to a pagination meccanism from the API, documented here https://dev.twitch.tv/docs/v5/#requests

Paging through Results: Cursor vs Offset When fetching multiple items, there are two different mechanisms to page through results, offset and cursor.

For some endpoints, you set a limit, set offset to 0, and add the limit value to the offset value each time you want to see the next page.

For other endpoints, offset is deprecated; instead, a cursor is returned. This is used to tell the server where to start fetching the next set of results.

that is a pretty standard format for pagination, meaning you will have to ask for successive chunks of 60 items by yourself by properly setting the offset attribute (or cursor, seems like there is some inconsistency here)

first you can try to put a higher limit, for instance try

api : 'https://api.twitch.tv/v5/videos/XXXXXXX/comments?client_id=' + this.state.cid + '&limit=100'

and it should return 100 values instead of 60

then ask for the 100 next using

api : 'https://api.twitch.tv/v5/videos/XXXXXXX/comments?client_id=' + this.state.cid + '&limit=100&offset=100'

note: Ive never used the twitch API, I might be wrong.

hits.comments.map is still throwing a TypeError of: 'Cannot read property 'map' of undefined' Also including the limit field in the api call is still capping at 60 for some reason.. Thanks for your contribution anyway :) — TJDev, Feb 20 '19 at 13:33
for the state.hits, you initialize it as [], try initialize to { comments: [] } and use hits.comments.map. for the cap... idk :p — Ji aSH, Feb 20 '19 at 13:41

score 1 · Answer 2 · answered Feb 20 '19 at 13:36

1

try:

...

render(){
const { hits } = this.state;
console.log({hits});

return (
 <ul>
   { hits && hits.comments && hits.comments.length !== 0 ?
         hits.comments.map(hit =>
           <li>
             <p>{hit.content_type}</p>
           </li>
         )
      :
         <div>/* something to describe what is wrong or some loading */</div>
   }
 </ul>
);
}

...

answered Feb 20 '19 at 13:36

Hsaido

125
12

This worked perfect, Thank you very much! Do you know much about the Twitch API result cap? – TJDev Feb 20 '19 at 13:59
Good for you, you're welcome! Sorry, i never used it before, but i'll try and i'll let you know if i found any solution. – Hsaido Feb 20 '19 at 14:20

Map comments from Twitch API - React

2 Answers2