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'}
      ],
      monthwise: []
    };
  }
  
  componentDidMount() {
  	
    const monthwise = this.state.news.reduce((res, obj) => {
    	const ym = moment(obj.date).format("YYYY-MM")
    	res[ym] = res[ym] || []
      res[ym].push(obj);
      return res;
    }, {})
            
    this.setState({monthwise})
  }

  render() {
    return( 
    	<div>
        {Object.values(this.state.monthwise).map((items, index) => {
            return(
              <div key={index}>
                <h4>{moment(items[0].date).format("YYYY MMMM")}</h4>  
                {items.map((item, key) => <div key={key}>{item.content}</div>	)}
              </div>
            ) 
        	}) 
        }
     </div>
   )
  }
}

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