[dmitry.suhotsky]

Реализую todolist, при нажатии на кнопку вызывается функция _done, которая помечает задачу выполненной, зачеркивает и присваивает inDone = !inDone, но срабатывает только один раз, toggle не отрабатывает

import React, { Component } from 'react';
import './TodoList.css'

export default class TodoList extends Component {
    constructor(props) {
        super();

        this.state = {
            tasks: [
                {title: "learn JS", inDone: true},
                {title:'Learn ReactJS',inDone: false}
            ]
        }
    }
    _handlewrite(event) {

        if (event.key === 'Enter') {
            var message = event.target.value;
            var tasks = this.state.tasks
            tasks.push({title: message, inDone: false});
            this.setState({tasks})
            event.target.value = "";
        }
    }
    _geleteTask(index) {
        var tasks = this.state.tasks.filter(function (elem, i) {
            if (i !== index) {
                return true;
            } else {
                return false;
            }
        });
        this.setState({tasks})
    }
    _done(index) {
        var tasks = this.state.tasks;
        tasks[index].inDone = !this.state.tasks.inDone;
        this.setState({tasks})
    }
    render() {
        return (
            <div className="TodoList">
                <input onKeyPress={this._handlewrite.bind(this)} />
                {
                    this.state.tasks.map((task, index) => {
                        return <div className={task.inDone == true ? 'TodoList__task TodoList__inDone__true': 'TodoList__task'} key={index}>
                        <span onClick={this._done.bind(this,index)} className="TodoList__inDone">V</span>
                        {task.title} 
                        <span className="TodoList__delete" onClick={this._geleteTask.bind(this, index)}>X</span>
                        </div>

                    })
                }

            </div>
        );
    }
}