Menu

Tech

English

Recap: Forms & Inputs

Part of the Fundamentals section of Coddy's React journey — lesson 32 of 42.

Challenge

Medium

Chapter recap. Build a nickname picker with the full controlled-input loop: type, watch live feedback, clear.

Make the input (id="nick") controlled with nick state, starting empty.
The paragraph (id="meter") shows N of 12 where N is the nickname's current length (e.g. typing Coddy → 5 of 12), derived, not stored.
The id="clear" button empties the nickname, and the box with it.

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>

All lessons in Fundamentals

1Meet React

What Is React?Your First Component One Parent Rule JSX Is Not HTML Recap: Meet React

4Props

What Are Props?Passing Props Two Props Same Component, New Data The Children Prop Recap: Props

7Conditions & Lists

Ternary Rendering Show with &&Render a List Keys Matter Filter, Then Map Recap: Conditions & Lists

2JSX Expressions

Curly Braces Math in Braces Braces in Attributes Calling Functions in JSX Recap: JSX Expressions

5State & Events

What Is State?Click Counter Count in Steps Toggle with State Independent State Recap: State & Events

8Project: Profile Card

Step 1: Card Structure Step 2: Card with Props Step 3: Like Button Step 4: Follow Toggle

3Components

Building Blocks Your Second Component Reuse Components Compose a Page Recap: Components

6Forms & Inputs

Controlled Inputs Echo the Input Character Counter Clear ButtonRecap: Forms & Inputs