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

class News extends React.Component {
	constructor(props) {
    super(props);
    this.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() {
    return( 
    	<div>
        {this.state.news.map(item => {
        
            const yearMonth = moment(item.date).format("MMMM YYYY");
            const yearM = moment(item.date).format("MMMM_YYYY");
            
            return(
              <div className={'months ' + yearM}>
                  <h2>{yearMonth}</h2>
                  <p>{item.content}</p> 
              </div>
            ) 
        	}) 
        }
     </div>
   )
  }
}

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