123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- 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; */
|