sample-apps/react-todo/src/app.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React, { useState, useEffect } from 'react'

import './app.css'

export default function App(db) {
  const [todoText, setTodoText] = useState('')
  const [todoList, setTodoList] = useState([])
  const addTodo = text => {
    setTodoList([...todoList, text])
  }
  return (
    <div>
      <form>
        <label>Todo</label>
        <input
          type="text"
          name="todo"
          onChange={e => setTodoText(e.target.value)}
          value={todoText}
        />
      </form>
      <button onClick={() => addTodo(todoText)}>Add Todo</button>
      <ul>
        {todoList.map(k => (
          <li key={k}>{k}</li>
        ))}
      </ul>
    </div>
  )
}