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 calculer à partir de celui-ci à chaque render. Les compteurs de longueur de style Tweet tiennent en 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 direct.

Rendez l'élément input (id="bio") contrôlé avec l'état bio (commencez vide).
Le paragraphe (id="length") affiche N characters où N est la longueur actuelle de la biographie (calculée, 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>