The Twitch API displays a maximum of 60 records and a _next cursor for pagination. I can't find a way to map through all the results using the cursor in React using the map function.
componentDidMount() {
this.getComments();
}
getComments(){
const api = 'https://api.twitch.tv/v5/videos/'+ this.state.value +'/comments?client_id='+ this.state.cid;
fetch(api, {
method: 'get',
headers: {"Client-ID": this.state.cid}
})
.then((response) => response.text())
.then((responseText) => {
this.setState({hits : (JSON.parse(responseText)), api: api})
});
}
render(){
const { hits } = this.state;
console.log({hits});
return (
<div>
<ul id="results">
{ hits && hits.comments && hits.comments.length !== 0 ?
hits.comments.map(hit =>
<li key={hit._id}>
<span>[{this.convertSeconds(hit.content_offset_seconds)}] - {hit.message.body}</span>
</li>
)
:
<div>No Comments Found</div>
}
</ul>
</div>
);
}
How would I map through using the _next cursor with this mapping technique? Or is there a different way I could achieve it?
Below is the JSON response..