Echo the Input

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

Once input text lives in state, showing it anywhere is just braces. A greeting that follows the box as you type:

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

The ternary handles the empty box with a friendly prompt instead of an awkward Hello, !. This input-plus-live-output pattern is search boxes, signup forms and editors everywhere.

Challenge

Easy

Build a live greeting.

Add name state starting as an empty string and make the input (id="name") controlled: value + onChange.
The paragraph (id="echo") shows Type your name while the box is empty, and Hello, ...! with the typed name otherwise (e.g. typing Ada → Hello, Ada!).

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>