Latihan 1 dari materi Stores Solid di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya App dengan <div> berisi <p></p> kosong. Buat store untuk Andi:
Impor createStore dari "solid-js/store".
Di dalam App, tulis const [state, setState] = createStore({ name: "Andi", age: 25 }).
Isi paragrafnya dengan {state.name} ({state.age}), supaya berbunyi persis Andi (25).
Tambahkan tombol di dalam <div>: <button onClick={() => setState("age", a => a + 1)}>+1 Tahun</button>.
Yang dicek:
Kodemu memuat createStore.
Halaman punya <button>.
Sebelum apa pun diklik, <p> berisi persis Andi (25).
Sesudah tombol pertama diklik sekali, <p> berisi persis Andi (26).
Hint
Store dibuat dengan createStore dari solid-js/store. Isinya dibaca dengan titik tanpa kurung, dan diubah lewat setter yang menyebut nama propertinya.
Simpan { name: "Andi", age: 25 } di createStore. Paragrafnya merangkai state.name, spasi, lalu state.age di dalam kurung. Tombolnya memanggil setState dengan nama properti age dan fungsi yang menambah 1.
const [state, setState] = createStore({ name: "Andi", age: 25 }) lalu <p>{state.name} ({state.age})</p> <button onClick={() => setState("age", a => a + 1)}>+1 Tahun</button>
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...
