import React, { useState } from 'react';

function App() {
    const [todoList, setTodoList] = useState([]);

    const addTodoItem = (todoList) => {
        setTodoList(todoList);
        // alert(todoList): XXX not updated immediately!
    }

    return (
        <div>
            <TodoForm
                addTodoItem={addTodoItem}
            />
            <ul>
                {todoList.map(text => <li>{text}</li>)}
            </ul>
        </div>
    )
}

function TodoForm({ addTodoItem }) {
    const [todoItem, setTodoItem] = useState("Fill in your TODO item");

    const handleSubmit = (event) => {
        event.preventDefault();
        addTodoItem(todoItem);
    }
    const handleTodoItemChanged = event => {
        setTodoItem(event.target.value)
    }

    return (
        <form
            onSubmit={handleSubmit}
        >
            <input name="" type="text" value={todoItem} onChange={handleTodoItemChanged} />
            <input type="submit" value="Add to the TODO list" />
        </form>
    )
}

export default App;