> For the complete documentation index, see [llms.txt](https://lesha.gitbook.io/react-js-for-dummies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lesha.gitbook.io/react-js-for-dummies/app-todo/komponent-stroka-vvoda-novogo-dela.md).

# Компонент: Строка ввода нового дела

Рядом с `TodoApp.jsx`, в папке `todo`, создадим файл `Field.jsx`.

В созданном файле объявим функцию `Field`, которая будет являться нашим компонентом. Сделаем так, что бы она возвращала хоть что-то:

{% code title="Field.jsx" %}

```jsx
export function Field() {
  return <p>Hello, world!</p>
}
```

{% endcode %}

Не забудь импортировать `React` и `useState`.

В прошлом уроке мы научились пользоваться `useState`, давай применим его тут для хранения содержимого поля ввода.

Для ввода текстовых данных есть тег `<input>`, у которого есть свойство `value` для текста и `onChange` для обработки *изменений*, сродни `onClick` для нажатий. Следовательно, наш компонент будет выглядеть как-то так:

{% code title="Field.jsx" %}

```jsx
export function Field() {
  const [text, setText] = useState(''); // хранение текста

  function onInputChange() { // обработчик изменения
    // что-то тут будет ???
  }

  return (
    <div>
      <input type="text" value={text} onChange={onInputChange} />
    </div>
  );
}
```

{% endcode %}

Обрати внимание на `useState`: теперь изначальное значение — пустая строка.

Осталось понять, что делать в `onInputChange`. Нам надо получить новое значение из поля ввода и сохранить его в `text`.

## События

В прошлом уроке мы узнали о том, что существуют события и их обработчики. В данном случае, у нас есть поле ввода, на котором висит обработчик события `change`.

Обработчик события получает первым аргументом (обычно его называют `e`, от "event") само событие — всю информацию, которую браузер знает о том, что произошло. В частности, какой элемент на странице породил это событие. Этот элемент доступен нам в объекте `e.target` . Его новое значение — в `e.target.value` . Это значение нам и предстоит сохранить в `text`:

{% code title="Field.jsx" %}

```jsx
function onInputChange(e) {
  setText(e.target.value);
}
```

{% endcode %}

Вуаля! Теперь мы можем редактировать значение поля ввода! Строго говоря, если бы мы ничего не писали, а оставили голый `<input type="text"/>` , мы бы тоже смогли редактировать его с клавиатуры, однако теперь мы можем его редактировать из кода нашего компонента!

## Кнопка

Осталось совсем немного: создать кнопку, которая будет добавлять дело в список:

{% code title="Field.jsx" %}

```jsx
return (
  <div >
    <input className="left" type="text" value={text} onChange={onInputChange} />
    <button>New</button>
  </div>
);
```

{% endcode %}