Tampilkan Kembali Input

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

Setelah teks input tersimpan dalam state, kamu hanya perlu kurung kurawal untuk menampilkannya di mana saja. Sapaan yang mengikuti isi kotak saat kamu mengetik:

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

Operator ternary menangani kotak kosong dengan prompt yang ramah, bukan Hello, ! yang terasa janggal. Pola input dan output langsung ini digunakan di kotak pencarian, formulir pendaftaran, dan editor di mana-mana.

Tantangan

Mudah

Buat sapaan langsung.

Tambahkan state name yang dimulai sebagai string kosong dan jadikan input (id="name") terkontrol: value + onChange.
Paragraf (id="echo") menampilkan Type your name saat kotak kosong, dan Hello, ...! dengan nama yang diketik jika tidak kosong (misalnya, mengetik Ada → Hello, Ada!).

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>