attempt.jsx

// @flow

import React from 'react';

type Props = {
  tasks: Array<Object>,
};

type State = {
  isInProgress: boolean
}

class Task extends React.Component<Props, State> {
  constructor(props: Object) {
    super(props);
    this.state = { isInProgress: true };
    this.updateStatus = this.updateStatus.bind(this);
  }
  updateStatus = function () {
    this.setState({ isInProgress: !this.state.isInProgress });
  }

  render() {
    return (
      <div className="tasks-wrapper">
        {this.props.tasks.map(task => (
          <div className="task-container" key={task.ID}>
            <h2>{task.title}</h2>
            <h3 className="status" onClick={this.updateStatus}>
              {this.state.isInProgress ? 'In Progress' : 'Done'}
            </h3>
            <h4>{task.details}</h4>
          </div>
        ))}
      </div>
    );
  }
}

export default Task;