Penghitung Karakter

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

Karena teks tersebut adalah state, kamu dapat menghitung dengannya pada setiap render. Penghitung jumlah karakter bergaya tweet cukup satu baris:

<p>{message.length} characters</p>

Tidak perlu state tambahan: message.length dihitung dari state yang sudah ada dan diperbarui secara otomatis setiap kali kamu menekan tombol. Aturan praktis: jika kamu bisa menghitungnya dari state yang sudah ada, jangan simpan nilainya dalam state.

Tantangan

Mudah

Buat kotak bio dengan pengukur panjang langsung.

Buat input (id="bio") terkontrol dengan state bio (mulai kosong).
Paragraf (id="length") menampilkan N characters, dengan N adalah panjang bio saat ini (dihitung, bukan disimpan).

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>