import logo from './logo.svg';
import './App.css';

export default function App() {
  const todos = [
    {id: 1, text: "Wash dishes", done: false},
    {id: 2, text: "Learn React.js", done: false},
    {id: 3, text: "Study English", done: false}
  ]
  return (
    <div className="App">
      <h1>Todo List</h1>
      <TodoList todos={todos} />
      <AddTodo />
    </div>
  );
}

function TodoList (props) {
  return (
    <ul>
      {props.todos.map(todo =>(
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}
function AddTodo () {
    function handleAddTodo(event) {
      event.preventDefault();
      const text = event.target.elements.addTodo.value;
      const todo = {
        id: 4,
        text,
        done: false
      }
    }
  return (
    <form onSubmit={handleAddTodo}>
      <input name="addTodo" placeholder="Add Todo"></input>
      <button type="submit">Submit</button>
    </form>
  );
}
/* export default App; */