Répéter la saisie

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 29 sur 42.

Une fois que le texte de l'élément input réside dans l'état, l'afficher n'importe où se fait simplement avec des accolades. Un message d'accueil qui suit le champ pendant que vous tapez :

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

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

Le ternaire gère la case vide avec une invite conviviale au lieu d'un étrange Hello, !. Ce motif saisie-plus-sortie-en-direct se retrouve dans les barres de recherche, les formulaires d'inscription et les éditeurs partout.

Défi

Facile

Créez un message de salutation en direct.

Ajoutez l'état name en commençant par une chaîne vide et rendez l'input (id="name") contrôlé : value + onChange.
Le paragraphe (id="echo") affiche Type your name lorsque la case est vide, et Hello, ...! avec le nom saisi sinon (par exemple, en tapant Ada → Hello, Ada!).

Essayez vous-même

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