Tombol Hapus

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

Inilah keunggulan input terkontrol: karena state mengelola teks, kodemu bisa mengubah kotak, bukan hanya pengguna. Reset dari mana saja:

<button onClick={() => setName('')}>Clear</button>

Setel state menjadi string kosong dan kotak akan kosong sendiri pada render berikutnya, karena value={name} selalu menampilkan state. Dengan input yang tidak terkontrol, kamu harus mengakses DOM secara manual. Dengan state, cukup satu kali memanggil setter.

Tantangan

Sedang

Selesaikan penyusun pesan.

Buat input (id="message") terkontrol dengan state message.
Tampilkan draf di paragraf (id="draft"): teks Draft: diikuti pesan.
Tombol id="clear" mengosongkan pesan.

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>