How to change "Not Done" to "Done"

I am learning React. I am having a problem. I can't make Not Done a Done. I would like to beg for help. If not difficult, I would like an example of how to implement this. If I have errors, sorry. I am bad in English.

class ToDoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        completed: true
    }
    this.handleClick = this.handleClick.bind(this);
  }

  render () {
  const { items} = this.props
  return (
    <table>
        {items.map(item => (
            <tr className="hr">
              <td className="col1">{item.id}</td>
              <td className="col2">{item.text}</td>
              <td className="col3">{item.date}</td>
              <td className="col4">{this.state.сompleted ? 'Done' : 'Not Done'}</td>
              <td className="col5"><button onClick ={ this.handleClick }className="btn btn-xs btn-success img-circle">&#x2713;</button></td>
            </tr>
          ))}
    </table>
  )
  }

    handleClick() {
      console.log('---', 'completed')
    //   this.setState({
    //       completed: !this.state.completed
    // })
    if (this.state.completed = true) {
      this.state.completed = false
    }
  }  
}