Latihan 1: Store Mutations — SolidJS

Latihan 1 dari materi Store Mutations di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah mengimpor createStore, membuat const [state, setState] = createStore({ items: ["A", "B"] }), dan menampilkan <p>Items: {state.items.join(", ")}</p>. Biarkan semuanya, lalu:

Tambahkan produce ke impornya: import { createStore, produce } from "solid-js/store".
Buat fungsi addItem yang menjalankan setState(produce(s => { s.items.push("C") })).
Tambahkan tombol di dalam <div>: <button onClick={addItem}>Tambah</button>.

Yang dicek:

Kodemu memuat produce.
Halaman punya <button>.
Sebelum apa pun diklik, <p> berisi persis Items: A, B.
Sesudah tombol pertama diklik sekali, <p> berisi persis Items: A, B, C.

Hint

Store gak bisa diubah langsung. produce dari solid-js/store membiarkan kamu menulis perubahan seperti pada objek biasa, lalu setter-nya menerapkan perubahan itu.
Impor produce bersama createStore. Buat fungsi yang memanggil setState dengan produce, dan di dalam produce, push "C" ke s.items. Pasang fungsi itu di onClick sebuah tombol.
const addItem = () => { setState(produce(s => { s.items.push("C") })) } lalu <button onClick={addItem}>Tambah</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Store Mutations — SolidJS

Hint

Memperbarui Aplikasi