{"size": 2028, "ext": "js", "max_stars_repo_path": "frontend/src/components/WordsTableComponent.js", "max_stars_repo_name": "stPhoenix/project_osirius", "max_stars_repo_stars_event_min_datetime": "2020-07-27T02:31:52.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-27T02:31:52.000Z", "max_issues_repo_path": "frontend/src/components/WordsTableComponent.js", "max_issues_repo_name": "stPhoenix/project_osirius", "max_issues_repo_issues_event_min_datetime": "2020-02-11T21:21:56.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T03:41:40.000Z", "max_forks_repo_path": "frontend/src/components/WordsTableComponent.js", "max_forks_repo_name": "stPhoenix/project_osirius", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 18, "max_forks_count": null, "avg_line_length": 47.1627906977, "max_line_length": 138, "alphanum_fraction": 0.3165680473}
import React from 'react';
import "./AppComponent.css";
import PropTypes from 'prop-types';

const componentProps = {
    words: PropTypes.array,
    handleCheck: PropTypes.func,
};

export const WordsTableComponent = (props) => {
    return(
        <table className="table">
            <thead>
                <tr className="text-center">
                    <th scope="col">Word</th>
                    <th scope="col">Check</th>
                </tr>
            </thead>
            <tbody>
                 {props.words.map(word => {
			                                 return (<tr key={word.id+"words"}>
                                                        <td>
                                                            <div className="text-center">
                                                                <br />{word.name}
                                                                <br />[{word.pronunciation}]
                                                                <br />Category: [{word.category_set.map(category => (category.name+" "))}]
                                                                <br />{word.translation}
                                                            </div>
                                                        </td>
                                                        <td className="align-middle">
                                                            <label className="m-checkbox-container d-flex justify-content-center">
                                                                <input name={word.id} onChange={props.handleCheck} type="checkbox" />
																<span className="m-checkbox"></span>
                                                            </label>
                                                        </td>
                                                     </tr>);
		                                  })}
            </tbody>
        </table>
    );
};

WordsTableComponent.propTypes = componentProps;