Character Counter

Part of the Fundamentals section of Coddy's React journey. Lesson 30 of 42.

Because the text is state, you can compute with it on every render. Tweet-style length counters are one line:

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

No extra state needed: message.length is derived from existing state, recalculated automatically on every keystroke. Rule of thumb: if you can compute it from state you already have, don't store it in state.

Challenge

Easy

Build a bio box with a live length meter.

Make the input (id="bio") controlled with bio state (start empty).
The paragraph (id="length") shows N characters where N is the bio's current length (computed, not stored).

Try it yourself

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