Latihan 1: Proyek: Todo App — React

Latihan 1 dari materi Proyek: Todo App di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bikin todo app kecil di dalam App. Kode awal sudah berisi function App() dan fungsi addTodo yang masih kosong. Isi keduanya:

Simpan dua state dengan useState: daftar todo (mulai dari []) dan isi kolom ketik (mulai dari "").
Render <input id="todo-input"> yang controlled: value diambil dari state isi ketikan, dan onChange menyimpan ketikan baru ke state itu.
Render <button id="add-btn">Tambah</button> yang memanggil addTodo lewat onClick.
Di addTodo: kalau isi ketikan kosong, berhenti. Kalau ada, simpan daftar baru [...todos, isiBaru] lewat setter-nya (misalnya setTodos(...)), lalu kosongkan kolom ketik (misalnya setInput("")).
Render <ul id="todo-list"> berisi satu <li> per todo, dibuat dengan .map(...) dari state.

Yang dicek:

#todo-input, #add-btn dan #todo-list ada di halaman.
Pemeriksa mengetik Belajar React ke #todo-input, lalu menekan #add-btn. Sesudah itu #todo-list harus memuat teks Belajar React, dan #todo-input harus kosong lagi.
Kodenya memakai useState(, onClick dan .map(, dan memanggil sebuah setter, misalnya setTodos(.

Hint

Todo app ini butuh dua state: daftar todo dan isi kolom ketik. Barisnya digambar dari daftar itu dengan map, jadi baris baru muncul sendiri begitu state-nya diganti.
const [todos, setTodos] = useState([]) dan const [input, setInput] = useState(""). Input-nya pakai value={input} dan onChange={(e) => setInput(e.target.value)}, tombolnya onClick={addTodo}, dan ul-nya berisi todos.map(...).
const addTodo = () => { if (!input.trim()) return; setTodos([...todos, { id: Date.now(), text: input.trim() }]); setInput("") } lalu di dalam ul: {todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Proyek: Todo App — React

Hint

Memperbarui Aplikasi