<commit_before>import React from "react";
import moment from 'moment';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import NewsItem from "./NewsItem";
import NewsCow from "./NewsCow";

// const NewsItem = ({info}) => (
//   <div className="newsItem">
//     {info.title} <span className="subItem">{info.sitelink}</span>
//     <div style={{position: 'absolute', bottom: 0, right: 0}}>
//       <img src={`/dist/icons/${info.sitehost}.jpg`} />
//     </div>
//   </div>
// )

export default class NewsList extends React.Component {
  render () {

    if (this.props.loading) {
      return <div>Loading</div>
    }


    if (this.props.newsItems.length === 0) {
      return (
        <div id="emptyList">
        </div>
      );
    } else {
      var makeList = x => <li key={x.guid} className="newsItemWrapper"><NewsItem info={x}/></li>;

      return (
          <ReactCSSTransitionGroup component="ul" className="newsWrapper"
            transitionName="example"
            transitionAppear={true}
            transitionAppearTimeout={500}            
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>
            { this.props.newsItems.map(makeList) }
          </ReactCSSTransitionGroup>
  		);
    }
	}
};<commit_msg>Use itemID as react list key.<commit_after>import React from "react";
import moment from 'moment';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import NewsItem from "./NewsItem";
import NewsCow from "./NewsCow";

// const NewsItem = ({info}) => (
//   <div className="newsItem">
//     {info.title} <span className="subItem">{info.sitelink}</span>
//     <div style={{position: 'absolute', bottom: 0, right: 0}}>
//       <img src={`/dist/icons/${info.sitehost}.jpg`} />
//     </div>
//   </div>
// )

export default class NewsList extends React.Component {
  render () {

    if (this.props.loading) {
      return <div>Loading</div>
    }


    if (this.props.newsItems.length === 0) {
      return (
        <div id="emptyList">
        </div>
      );
    } else {
      var makeList = x => <li key={x.itemID} className="newsItemWrapper"><NewsItem info={x}/></li>;

      return (
          <ReactCSSTransitionGroup component="ul" className="newsWrapper"
            transitionName="example"
            transitionAppear={true}
            transitionAppearTimeout={500}            
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>
            { this.props.newsItems.map(makeList) }
          </ReactCSSTransitionGroup>
  		);
    }
	}
};
{'fraction_non_alphanumeric': 0.1586872586872587, 'fraction_numerical': 0.009266409266409266, 'mean_word_length': 2.5251700680272107, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7442979', 'n_tokens_mistral': 808, 'n_tokens_neox': 781, 'n_words': 157}