Girdiyi Yansıtma

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 29 / 42.

Girdi metni state içine alındığında, bunu herhangi bir yerde göstermek sadece süslü parantezlerden ibarettir. Siz yazarken kutuyu takip eden bir karşılama metni:

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

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

Üçlü operatör (ternary), boş kutuyu garip bir Hello, ! yerine dostça bir istemle ele alır. Bu girdi-ve-anlıklı-çıktı kalıbı; arama kutularında, kayıt formlarında ve her yerdeki düzenleyicilerde kullanılır.

Görev

Kolay

Canlı bir karşılama oluşturun.

Boş bir string olarak başlayan name state'i ekleyin ve input'u (id="name") kontrollü hale getirin: value + onChange.
Paragraf (id="echo"), kutu boşken Type your name gösterir ve aksi takdirde yazılan isimle birlikte Hello, ...! gösterir (örneğin Ada yazıldığında → Hello, Ada!).

Kendin dene

<!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>