{"size": 771, "ext": "js", "max_stars_repo_path": "src/components/Tasks/Task.js", "max_stars_repo_name": "Thomas-279/Todolist-React", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Tasks/Task.js", "max_issues_repo_name": "Thomas-279/Todolist-React", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Tasks/Task.js", "max_forks_repo_name": "Thomas-279/Todolist-React", "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": 19.7692307692, "max_line_length": 55, "alphanum_fraction": 0.5992217899}
import React from 'react';
import PropTypes from 'prop-types';

const Task = ({
  id,
  label,
  done,
  onChangeDone,
}) => {
  const classnames = done ? 'task task--done' : 'task';
  // Version longue
  // const handleOnChange = () => {
  //   onChangeDone(id);
  // };

  return (
    <li className={classnames}>
      <input
        type="checkbox"
        className="task__checkbox"
        id={id}
        checked={done}
        // onChange={handleOnChange}
        onChange={() => onChangeDone(id)}
      />
      <label htmlFor={id}>{label}</label>
    </li>
  );
};

Task.propTypes = {
  id: PropTypes.number.isRequired,
  label: PropTypes.string.isRequired,
  done: PropTypes.bool.isRequired,
  onChangeDone: PropTypes.func.isRequired,
};

export default Task;
