Penghitung Klik

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 23 dari 42.

State memerlukan pemicu, biasanya sebuah peristiwa. Hubungkan fungsi ke tombol dengan onClick dan ubah state di dalamnya:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

Ikuti satu klik dalam perulangan: klik → setCount(count + 1) → React merender ulang → paragraf menampilkan hitungan baru. Perhatikan fungsi panah: onClick={() => setCount(count + 1)} meneruskan fungsi untuk dipanggil nanti. Menulis onClick={setCount(count + 1)} akan langsung memanggilnya saat merender, sebuah bug klasik.

Tantangan

Mudah

Buat penghitung klasik.

Tambahkan state: count dimulai dari 0 (import sudah siap).
Tampilkan hitungan saat ini di dalam span dengan id="count".
Buat tombol +1 menambah hitungan sebanyak 1 setiap kali diklik.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>