Task.jsx

class Task extends React.Component {
  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>
    ) 
   )
 }
}