ReactJS ошибка при вызове setState

У меня есть компонент на реакте, который описывает одно задание в Todo-приложении. Задание представляется элементом <li>, в котором есть текст и кнопка удаления в виде <span>. Если кликнуть по <li>, текст должен зачеркиваться. Если кликнуть по <span> с крестиком, запись удаляется.

import React from "react";
class TodoItem extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = { text: props.item, done: false };
    }
    render()
    {
        let style = this.state.done ? "done" : "";
        return (
            <li onClick={this.handleComplete} className={style}>
                {this.state.text}
                <span className="close" onClick={this.handleRemove}>{"\u00D7"}</span>
            </li>
        );
    }
    handleComplete()
    {
        this.setState({ done: true });
    }
    handleRemove()
    {
        alert("remove");
    }
};
export default TodoItem;

При вызове обработчика handleComplete() вываливается ошибка в окне браузера с указанием на строку, где обновляется состояние компонента. Из-за чего возникает эта ошибка?

Ошибка:

TypeError: this is undefined
handleComplete
src/TodoItem.js:24

Место, где используется компонент:

import React from "react";
import Todo from "./Todo";
import TodoItem from "./TodoItem";
const List = props => {
    return (
    <ul>
        {
            props.items.map((item, index) => <TodoItem item={item} />)
        }
    </ul>);
};
export default List;