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 d’accueil en direct.

Ajoutez l’état name initialisé avec une chaîne vide et rendez le champ de saisie (id="name") contrôlé : value + onChange.
Le paragraphe (id="echo") affiche Type your name lorsque le champ est vide, et Hello, ...! avec le nom saisi dans le cas contraire (par exemple, en saisissant 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>