Clear Button

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

Here's the controlled-input superpower: since state owns the text, your code can change the box, not just the user. Reset it from anywhere:

<button onClick={() => setName('')}>Clear</button>

Set the state to an empty string and the box empties itself on the next render, because value={name} always displays the state. With an uncontrolled input you'd be reaching into the DOM by hand; with state it's one setter call.

Challenge

Medium

Finish the message composer.

Make the input (id="message") controlled with message state.
Show the draft in the paragraph (id="draft"): the text Draft: followed by the message.
The id="clear" button empties the message.

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>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Clear Button

All lessons in Fundamentals