Todo React

todo.js

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

class App extends Component {
    constructor() {
        super();
        this.state = {
            data: [],
            inputVal: '',
        }
    }

    render() {
        return (
            <div className="App">
                Список заданий <br/>
                <input type="text" value={this.state.inputVal} onChange={this.handleChange}
                       placeholder="Что вы хотите сделать "/>
                <button onClick={this.btn}>Создать</button>
                <ul>
                    {this.state.data.map((note, index) => {
                            if (note.status === 1) {
                                return (<li key={index}>{note.text} <span onClick={this.deleted.bind(this, index)}
                                                                          className="deleted">Удалить</span><span
                                    onClick={this.done.bind(this, index)} className="done">Выполнено</span></li>)
                            }
                            if (note.status === 2) {
                                return (<li key={index}><span className="note-done">{note.text}</span> <span
                                    onClick={this.deleted.bind(this, index)}
                                    className="deleted">Удалить</span><span
                                    onClick={this.done.bind(this, index)} className="done">Выполнено</span></li>)
                            }
                        })}
                </ul>
            </div>
        );
    }

    handleChange = (e) => {
        this.setState({inputVal: e.target.value})
    };

    deleted = (index, self) => {
        this.state.data.splice(Number(index), 1);
        this.setState({data: this.state.data});
    };

    btn = () => {
        if (this.state.inputVal !== '') {
            this.setState({data: this.state.data.concat([{text: this.state.inputVal, status: 1}]), inputVal: ''});
        }
    };

    done = (index, self) => {
        let last = {text: this.state.data[index].text, status: 2};
        this.state.data.splice(Number(index), 1);
        this.state.data.unshift(last);
        this.setState({data: this.state.data});
    }
}
export default App;