Skip to content

Instantly share code, notes, and snippets.

Created September 12, 2018 18:10
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
import React, { Component } from 'react';
import './App.css';
import FeaturedPost from './FeaturedPost';
//***note how we have to import the OtherPosts component
import OtherPosts from './OtherPosts';
import * as CosmicFunctions from '../cosmicFunctions';
class App extends Component {
this.state = {
dataReceived: false,
posts: [],
authors: [],
featuredPostIndex: 0,
otherPosts: [],
async componentDidMount(){
try {
const {posts, authors} = await CosmicFunctions.getCosmicJsData();
this.setState({dataReceived: true, posts: posts, authors: authors, otherPosts: posts.slice(1)})
catch(err) {
console.error('Error: Problem retrieving Cosmic JS data');
this.setState({dataReceived: false});
//*** Notice in the render function how we replaced the placeholder
//<p>Other Posts here</p> element with <OtherPosts/>
render() {
return (
<div className="App">
<header className="App-header">
Old School Shuffle
<div className="featuredPost">
{this.state.dataReceived ? <FeaturedPost post={this.state.posts[this.state.featuredPostIndex]}/> : ''}
<div className="spotifyPlayer">
<p>Spotify player here</p>
<div className="otherPosts">
<OtherPosts otherPosts={this.state.otherPosts}/>
<div className="footer">
<p>Footer here</p>
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment