Visualizzare l’input

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 29 di 42.

Una volta che il testo inserito è nello stato, mostrarlo ovunque basta usare le parentesi graffe. Un saluto che segue il campo mentre digiti:

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

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

L’operatore ternario gestisce la casella vuota con un messaggio amichevole invece di un imbarazzante Hello, !. Questo schema con input e output in tempo reale si trova ovunque: nelle caselle di ricerca, nei moduli di registrazione e negli editor.

Sfida

Facile

Crea un saluto dinamico.

Aggiungi lo stato name, inizializzato come stringa vuota, e rendi controllato l’input (id="name"): value + onChange.
Il paragrafo (id="echo") mostra Type your name quando il campo è vuoto e Hello, ...! con il nome digitato altrimenti (ad es. digitando Ada → Hello, Ada!).

Provalo tu

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