<commit_before>import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import * as styles from './style';

/**
 * The filter selected component.
 */
class Selected extends PureComponent {
  static propTypes = {
    values: PropTypes.arrayOf(PropTypes.shape()).isRequired,
    selected: PropTypes.arrayOf(PropTypes.string),
  };

  static defaultProps = {
    selected: null,
  };

  /**
   * @returns {Array}
   */
  getItems() {
    const { selected, values } = this.props;

    return values.reduce((prevValues, value) => {
      if (selected.includes(value.id)) {
        prevValues.push(value.label);
      }

      return prevValues;
    }, []);
  }

  /**
   * @returns {JSX}
   */
  render() {
    if (!this.props.selected || this.props.selected.length === 0) {
      return null;
    }

    const items = this.getItems();

    return (
      <Fragment>
        {items.map((item, index) => (
          <Fragment>
            <span className={styles.elipsed}>{item}</span>
            {(index < items.length - 1) ? <span className={styles.comma}>, </span> : ''}
          </Fragment>
        ))}
      </Fragment>
    );
  }
}

export default Selected;
<commit_msg>PWA-1010 Added missing key prop in the loop.<commit_after>import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import * as styles from './style';

/**
 * The filter selected component.
 */
class Selected extends PureComponent {
  static propTypes = {
    values: PropTypes.arrayOf(PropTypes.shape()).isRequired,
    selected: PropTypes.arrayOf(PropTypes.string),
  };

  static defaultProps = {
    selected: null,
  };

  /**
   * @returns {Array}
   */
  getItems() {
    const { selected, values } = this.props;

    return values.reduce((prevValues, value) => {
      if (selected.includes(value.id)) {
        prevValues.push(value.label);
      }

      return prevValues;
    }, []);
  }

  /**
   * @returns {JSX}
   */
  render() {
    if (!this.props.selected || this.props.selected.length === 0) {
      return null;
    }

    const items = this.getItems();

    return (
      <Fragment>
        {items.map((item, index) => (
          <Fragment key={item}>
            <span className={styles.elipsed}>{item}</span>
            {(index < items.length - 1) ? <span className={styles.comma}>, </span> : ''}
          </Fragment>
        ))}
      </Fragment>
    );
  }
}

export default Selected;

{'fraction_non_alphanumeric': 0.15920195439739412, 'fraction_numerical': 0.003257328990228013, 'mean_word_length': 2.426778242677824, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, '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': '7491023', 'n_tokens_mistral': 774, 'n_tokens_neox': 746, 'n_words': 164}