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() {
    const arr = new Array();
    return( 
    	<div>
        {this.state.news.map(item => {
            const yearMonth = moment(item.date).format("MMMM YYYY");
            const yearM = moment(item.date).format("MMMM_YYYY");
            if (arr.indexOf(yearMonth) < 0){
            	arr.push(yearMonth);
              return (
              <div className={'months ' + yearM}>
                  <h2>{yearMonth}</h2>
                  <p>{item.content}</p> 
              </div>
            	) 
            } else {
            	return (
              <div className={'months ' + yearM}>
                  <p>{item.content}</p> 
              </div>
            	) 
            }
            
        	}) 
        }
     </div>
   )
  }
}

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