Skip to content

Instantly share code, notes, and snippets.

@moodysalem
Created January 22, 2017 19:48
Show Gist options
  • Save moodysalem/d80547cf1c68cd0bfed9736454d1670c to your computer and use it in GitHub Desktop.
Save moodysalem/d80547cf1c68cd0bfed9736454d1670c to your computer and use it in GitHub Desktop.
Help with rendering reddit comment
import React, { Component } from "react";
const Entry = ({ entry: { name, game } }) => (
<div>
<h3>{name}</h3>
<p>{game}</p>
</div>
);
const CHANNELS = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
export default class App extends Component {
state = {
data: null,
promise: null
};
componentDidMount() {
this.loadData();
}
loadData() {
this.setState({
promise: Promise.all(
CHANNELS
.map(
channel =>
// assuming this API returns a JSON array of objects in the response
fetch(`https://wind-bow.gomix.me/twitch-api/channels/${channel}`)
.then(response => response.json())
)
)
.then(data => this.setState({ data }))
.catch(error => console.log(error))
.finally(() => this.setState({ promise: null }))
});
}
render() {
const { promise, data } = this.state;
if (promise !== null) {
return 'Loading!';
}
if (data === null) {
return 'Failed to load data!';
}
return (
<div>
{
data.map(
channelEntries => (
<div>{channelEntries.map(entry => <Entry entry={entry}/>)}</div>
)
)
}
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment