missionComplete3

import React from 'react';



class Todo extends React.Component{
  constructor(){
    super();
    this.state={
      complete: false
    }
  }

  handleClick(e){
    e.preventDefault();
    this.setState({
      complete: true
    })

  }

render(){
  var tasks = "";
  var buttons;

  if (this.state.complete){
        tasks = "complete"
    }else {
      tasks= "mission not complete"
      buttons = <button onClick={ (event)=> this.handleClick(event) }>complete</button>
    }


  return(

    <div>
      <li>{this.props.task}</li>
      {buttons}
      <br></br>
      { tasks }
    </div>
    )
  }
}


export default Todo;