Вывод введенных данных

Часть раздела Основы путешествия по React на Coddy — урок 29 из 42.

Как только текст input находится в состоянии, его отображение в любом месте — это просто фигурные скобки. Приветствие, которое меняется по мере ввода:

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

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

Тернарный оператор обрабатывает пустое поле дружелюбным приглашением вместо неловкого Hello, !. Этот паттерн «ввод плюс вывод в реальном времени» используется в поисковых строках, формах регистрации и редакторах повсюду.

Задание

Легко

Создайте динамическое приветствие.

Добавьте состояние name, начинающееся с пустой строки, и сделайте поле ввода (id="name") управляемым: value + onChange.
Абзац (id="echo") отображает Type your name, пока поле пустое, и Hello, ...! со введенным именем в противном случае (например, при вводе Ada → Hello, Ada!).

Попробуйте сами

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