Latihan 2: State Management Patterns — React

Latihan 2 dari materi State Management Patterns di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tampilkan todo list yang statenya dikelola reducer dan dibagikan lewat context.

Kode awal sudah punya TodoContext, AddTodo dengan <input id="todo-input" /> dan <button id="add-todo">Tambah</button> yang mengirim dispatch({ type: "add", payload: text }) lalu setText(""), dan App dengan useReducer(todoReducer, ["Belajar React"]). Biarkan semuanya.
Di todoReducer, tulis aksi "add": case "add": yang mengembalikan array baru, semua todo lama ditambah action.payload di belakangnya, misalnya [...state, action.payload]. Jangan push ke array lama: React cuma render ulang kalau state-nya array baru.
Di TodoList, ganti komentar di dalam <ul id="todos"> dengan state.map(...) yang menghasilkan satu <li> per todo.

Yang dicek:

Ada #todos dengan minimal 1 <li>.
Kodemu memakai .map(.
Setelah Belajar Svelte diketik di #todo-input dan #add-todo diklik, #todos memuat Belajar Svelte.
Setelah diklik, #todo-input kosong lagi.

Hint

Reducer menerima state lama dan satu aksi, lalu mengembalikan state baru. Untuk daftar, state baru berarti array baru.
Di switch todoReducer: case "add": return [...state, action.payload]. Lalu di TodoList: {state.map((todo, i) => <li key={i}>{todo}</li>)}.
case "add": return [...state, action.payload] dan di dalam <ul id="todos">: {state.map((todo, i) => <li key={i}>{todo}</li>)}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: State Management Patterns — React

Hint

Memperbarui Aplikasi