{"size": 1032, "ext": "js", "max_stars_repo_path": "src/views/XWJ/XwjDatasetRevealMaterial.js", "max_stars_repo_name": "Jamie0810/rca-ui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/XWJ/XwjDatasetRevealMaterial.js", "max_issues_repo_name": "Jamie0810/rca-ui", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/views/XWJ/XwjDatasetRevealMaterial.js", "max_forks_repo_name": "Jamie0810/rca-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.4615384615, "max_line_length": 97, "alphanum_fraction": 0.5106589147}
import React from 'react';
import { Table, Label } from 'reactstrap';
import {withTranslation} from "react-i18next";

class XwjDatasetRevealMaterial extends React.PureComponent {

  render () {
    const { t, dataSetPart } = this.props;

    return (
      <div>
        <Label className="my-3">
          {t('dataset.crucial_component_kinds_template', {count: this.props.dataSetPart.length})}
        </Label>
        <Table responsive striped>
          <thead>
            <tr>
              <th className="border-top-0">{t('common.serial')}</th>
              <th className="border-top-0">{t('common.crucial_component')}</th>
            </tr>        
          </thead>
          <tbody>
          {
            dataSetPart.map(({component}, index) => (
              <tr key={index}>
                <td>{index+1}</td>
                <td>{component}</td>
              </tr>
            ))
          }
          </tbody>
        </Table>
      </div>
    );
  }
}

export default withTranslation()(XwjDatasetRevealMaterial);
