create-todo.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoTable from './all-todo';
class CreateTodo extends React.Component {
    constructor () {
        super();
        this.state = {
            count: 0,
            data: []
        }
        this.update = this.update.bind(this);
        this.clearContent = this.clearContent.bind(this);
    }
    update () {
        let tempHolder = this.state.data;
        tempHolder.push({
            id: this.state.count,
            content: this.refs.inp.value
        })
        this.setState({
            count: this.state.count + 1,
            data: tempHolder
        });
    }
    clearContent (e) {
        e.target.value = '';
    }
    render () {
        return (
            <div>
                <input 
                    type="text" 
                    ref="inp" 
                    onFocus={this.clearContent} 
                />
                <button onClick={this.update} >
                    Create
                </button>
                <TodoTable tasks={this.state.data} />
            </div>
        )
    }
}

export default CreateTodo;

single-todo.js

import React from 'react';
import ReactDOM from 'react-dom';
class RowMaker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toEdit: true,
            tID: 'task' + props.taskID,
            editBtnID: 'btn' + props.taskID,
            inputID: 'inp' + props.taskID,
            rowID: props.taskID
        }
        this.update = this.update.bind(this);
        this.editTask = this.editTask.bind(this);
        this.deleteTask = this.deleteTask.bind(this);
    }
    update() {
        if (this.state.toEdit) {
            let str = document.getElementById(this.state.tID).textContent;
            let edit = document.getElementById(this.state.editBtnID);
            edit.textContent = 'Save';
            this.editTask(str);
            this.setState({
                toEdit: false
            });
        } else {
            let newCell = document.getElementById(this.state.tID);
            newCell.innerHTML = document.getElementById(this.state.inputID).value;
            let save = document.getElementById(this.state.editBtnID);
            save.textContent = 'Edit';
            this.setState({
                toEdit: true
            });
        }
    }
    editTask(content) {
        let currCell = document.getElementById(this.state.tID);
        currCell.innerHTML = '<input id="' + this.state.inputID + '" type="text" value="' + content + '"/>';
    }
    deleteTask() {
        if (this.state.toEdit) {
            let tbody = document.getElementsByTagName('tbody')[0];
            let targetRow = document.getElementById(this.state.rowID);
            tbody.removeChild(targetRow);
        }
    }
    render() {
        return (
            <tr id={this.state.rowID} >
                <td id={this.state.tID} >{this.props.task}</td>
                <td><button id={this.state.editBtnID} onClick={this.update} >Edit</button></td>
                <td><button onClick={this.deleteTask}>Delete</button></td>
            </tr>
        );
    }
}

export default RowMaker;