News Array

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<div id="container"></div>

Babel + JSX

// News
class News extends React.Component {

	// State.
	state = {  
    news: [ 
        {content: 'news item one', date: '2018-03-02'},
        {content: 'news item two', date: '2018-03-17'},
        {content: 'news item two', date: '2017-09-21'},
        {content: 'news item one', date: '2017-06-15'}
    ]
  }
  
  // Render.
  render = () => (
  	<div>
      {
      	Object.entries(this.organised()).map(([yearmonth, articles], i) => (
        	<div key={i}>
        	  <h3>{yearmonth}</h3>
            {articles.map((article, j) => (
            	<div key={j}>
            	  {article.content}
            	</div>
            ))}
        	</div>
        ))
      }
    </div>
  )
  
  // Organised.
  organised = () => this.state.news.reduce((total, article) => {
    const key = moment(article.date).format('YYYY MMMM')
    return {
      ...total,
      [key]: total[key] && total[key].concat(article) || [article]
    }
  }, {})
}

// Mount.
ReactDOM.render(<News/>,document.getElementById('container'));