import React, { useState } from "react";
import TodoList from "./TodoList";

// react manages states in app => state chages, then re-render
// hook: 
//     useState: return an array, specifically, [array, function]
 
function App() {
  // * Object destructuring
  const [todos, setTodos] = useState(["todo 1", "todo 2"])
  //                                 ^^^^^^^^^^^^^^^^^^^^ initial state of todos 
  //            ^^^^^^^ function to update `todos`
  //     ^^^^^ array that return by useState()
  return (
    <>
    
      <TodoList todos={ todos } />
      {/* every components has `props` */}
      <input type="text" />
      <input type="button" value="Add Todo" />
      <input type="button" value="Clear Completed" />
      <p>0 left to do</p>
    </>
  );
}

export default App;