react

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  state = {
    todo: '',
    todos: []
  }
  handleChange = (e) => {
    this.setState({
      todo: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault()
    console.log('I am ready to add todos')
  }
render() {
    const listOfTodos = this.state.todos.map(todo => {
    return (
      <div key={todo.id}>
        <li key={todo.id}>{todo.todo} <button> Delete Todo</button></li>
      </div>
      )
    })
  return (
    <div className="App">
      <header className="App-header">
        <h1>Todo App</h1>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>My Todo: </label> <br />
              <input type='text' id='todo' value={this.state.todo} onChange={this.handleChange} autoFocus={true} />
          </div>
          <button type='submit'>Add Todo</button>
        </form>
        <h3><u>List of Todo</u></h3>
        <ul>
          {listOfTodos}
        </ul>
      </header>
    </div>
    );
  }
}
export default App;