Compteur de caractères

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 30 sur 42.

Comme le texte est un état, vous pouvez effectuer des calculs avec lui à chaque rendu. Les compteurs de longueur de style Twitter tiennent sur une ligne :

<p>{message.length} characters</p>

Aucun état supplémentaire n'est nécessaire : message.length est dérivé de l'état existant, recalculé automatiquement à chaque frappe au clavier. Règle générale : si vous pouvez le calculer à partir d'un état que vous possédez déjà, ne le stockez pas dans l'état.

Défi

Facile

Créez une zone de biographie avec un compteur de longueur en temps réel.

Rendez le champ de saisie (id="bio") contrôlé avec l’état bio (vide au départ).
Le paragraphe (id="length") affiche N characters, où N correspond à la longueur actuelle de la biographie (calculée, et non stockée).

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>