Simple Todo App Using React Context API & Material-UI

AddTodo.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import InputAdornment from '@material-ui/core/InputAdornment';
import AddCircleRoundedIcon from '@material-ui/icons/AddCircleRounded';
import {TodoContext} from './TodoContext';

export default class AddTodo extends Component {
    static contextType = TodoContext;
    render() {
        const { handleInputChange, addTodo } = this.context;
        return (
            <Grid container>
                <Grid item xs={2} />
                <Grid item xs={8}>
                    <Paper>
                        <h2>Context API</h2>
                        <form onSubmit={addTodo}>
                            <TextField 
                            id="filled-secondary"
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <AddCircleRoundedIcon color="secondary" />
                                    </InputAdornment>
                                ),
                            }}
                            label="Add Todo"
                            variant="outlined"
                            color="secondary"
                            onChange={handleInputChange}
                            />
                        </form>
                        <br />
                    </Paper>
                </Grid>
                <Grid item xs={2} />
            </Grid>
        );
    }
}

TodoApp.js

import React from 'react';
import AddTodo from './AddTodo';
import TodoContextProvider from './TodoContext';
import TodoList from './TodoList';
import '../App.css';

export default function TodoApp() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Todo App</h2>
      </header>
      <TodoContextProvider>
        <AddTodo />
        <TodoList />
      </TodoContextProvider>
    </div>
  );
}

TodoContext.js

import React, { Component } from 'react';

export const TodoContext = React.createContext();

export default class TodoContextProvider extends Component {

    constructor(props) {
        super(props);
        this.state = { todo: '', todoList: [] };
        // this.state = { todo: '', todoList: [], editButtonClicked: false, editedTodo: '' };
        this.handleInputChange = this.handleInputChange.bind(this);
        this.addTodo = this.addTodo.bind(this);
        // this.handleEditClick = this.handleEditClick.bind(this);
        // this.handleTodoChange = this.handleTodoChange.bind(this);
        // this.updateTodo = this.updateTodo.bind(this);
    }

    handleInputChange(event) {
        this.setState({todo: event.target.value});
    }

    addTodo(event) {
        event.preventDefault();
        this.setState({todo: '', todoList: [...this.state.todoList, this.state.todo]});
    }

/*     handleEditClick(event) {
        event.preventDefault();
        this.setState({editButtonClicked: true});
    } */

/*     handleTodoChange(event) {
        this.setState({editedTodo: event.target.value});
    } */

/*     updateTodo(event) {
        event.preventDefault();
        this.setState({editedTodo: this.state.editedTodo});
        console.log(this.state.editedTodo);
    } */
    
    render() {
        return (
            <TodoContext.Provider value={{...this.state, handleInputChange: this.handleInputChange, addTodo: this.addTodo}}>
            {this.props.children}
            </TodoContext.Provider>
            /* <TodoContext.Provider value={{...this.state, handleInputChange: this.handleInputChange, addTodo: this.addTodo, handleEditClick:this.handleEditClick, handleTodoChange: this.handleTodoChange, updateTodo: this.updateTodo}}>
                {this.props.children}
            </TodoContext.Provider> */
        );
    }
}

TodoList.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
// import UpdateTodo from './UpdateTodo';
import {TodoContext} from './TodoContext';

export default class TodoList extends Component {
    static contextType = TodoContext;
    render() {
        const { todoList, handleEditClick } = this.context;
        // const { todoList, handleEditClick, editButtonClicked, editedTodo } = this.context;
        return (
            <Grid container>
                <Grid item xs={4} />
                <Grid item xs={4}>
                    <ul>
                        {todoList.map((todo, index) => (
                            <Paper key={index}>
                                <h3>{todo}</h3>
                                {/* {
                                    !editButtonClicked ?
                                    <h3>{todo}</h3> : 
                                    <div>
                                        <h3>{editedTodo}</h3>
                                        <UpdateTodo />
                                    </div>
                                } */}
                                <IconButton size="small" color="primary" onClick={handleEditClick}>
                                    <EditIcon />
                                </IconButton>
                                <IconButton size="small" color="primary">
                                    <DeleteIcon />
                                </IconButton>
                                <br />
                            </Paper>
                        ))}
                    </ul>
                </Grid>
                <Grid item xs={4} />
            </Grid>
        );
    }
}

UpdateTodo.js

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import {TodoContext} from './TodoContext';

export default class UpdateTodo extends Component {
    static contextType = TodoContext;
    render() {
        const { handleTodoChange, updateTodo } = this.context;
        return (
            <form onSubmit={updateTodo}>
                <TextField color="primary" label="Edit Todo" onChange={handleTodoChange} />
            </form>
        );
    }
}