Skip to content

Instantly share code, notes, and snippets.

@JonatanSalas

JonatanSalas/NewsFromDerivedState.js

Created March 4, 2018 14:37
Show Gist options
  • Save JonatanSalas/d1d944aaa1fed63d3fe80c13f4a19586 to your computer and use it in GitHub Desktop.
Save JonatanSalas/d1d944aaa1fed63d3fe80c13f4a19586 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jonatan E. Salas created this gist Mar 4, 2018.
    29 changes: 29 additions & 0 deletions NewsFromDerivedState.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    import React from 'react';

    import withCache from './withCache';
    import newsFecher from './newsFetcher';
    import Placeholder from './Placeholder';

    @withCache
    export default class News extends React.Component {
    static getDerivedStateFromProps = (nextProps, nextState) => ({
    news: newsFetcher(nextProps.cache)
    });

    render() {
    const { news } = this.state;

    return (
    <Placeholder delayMs={1000} fallback={<h1>Loading..</h1>}>
    {news.map(this.renderNewsItem)}
    </Placeholder>
    )
    }

    renderNewsItem = (nws, idx) => (
    <div key={`nws.${idx}-${nws.id}`}>
    <h2>{nws.title}</h2>
    <p>{nws.body}</p>
    </div>
    );
    }