todolist.js

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoItems: [
        'workout',
      ],
    }
    this.handleSubmit= this.handleSubmit.bind(this);
  }
  
  handleSubmit(event) {
    event.preventDefault();
    const newItem = event.target.newItem.value;
    this.setState({
      todoItems: [...this.state.todoItems, newItem]
    })
  }
  
  render() {
    return (
      <div>
        <h4>Todo List</h4>
        <div>
          <form onSubmit={this.handleSubmit}>
            <input
              name="newItem"
              type="text"
              placeholder="enter new item"
            />
            <button
              type="submit"
            >
              Add
            </button>
          </form>
        </div>
        <div>
          {this.state.todoItems.map((item) => (
            <div>
              {item}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

ReactDOM.render( <TodoList />, document.getElementById('root'))