<section id="description">
<p>У вашего приложения может быть более сложное взаимодействие между <code>state</code> и отображаемым пользовательским интерфейсом. Например, элементы управления формой для ввода текста, такие как <code>input</code> и <code>textarea</code>  сохраняют свое собственное состояние в DOM по типу пользователя. С React, вы можете переместить это изменяемое состояние в компонент. Ввод пользователя становится частью приложения <code>state</code>, так что React контролирует значение этого поля ввода. Как правило, если у вас есть компоненты React с полями ввода, которые пользователь может ввести, это будет управляемая форма ввода.</p></section>

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line

    // change code above this line
  }
  // change code below this line

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


index

Создание управляемого ввода

Create a Controlled Input

<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.

The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.

Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.

front-end-libraries

React

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.onChange = this.onChange.bind(this)
    // change code above this line
  }
  // change code below this line

  onChange(event){
    this.setState({
      input: event.target.value,
    })
  }

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input onChange={this.onChange} value={this.state.input} />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.onChange = this.onChange.bind(this);
    // change code above this line
  }
  // change code below this line

  onChange(event){
    this.setState({
      input: event.target.value,
    });
  }

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}

        <input value={this.state.input || ""} onChange={this.onChange}/>

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
       this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
handleChange(event) {
    this.setState({input: event.target.value});
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <form>
<input type="text" value={this.state.input} onChange={this.handleChange} />
</form>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
     this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
handleChange(event){
  this.setState({input: event.target.value});
}
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value={this.state.input || ''} onChange={this.handleChange}></input>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(e) {
    this.setState({...this.state, input: e.target.value})
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input type='text' onChange={this.handleChange} value={this.state.input} />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange=this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input: event.target.value
    })
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value={this.state.input} onChange={this.handleChange}></input>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input: event.target.value
    })
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input} onChange = {this.handleChange}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event){
    this.setState({
      input:event.target.value
    })
  }
  render() {
    return (
      <div>
        { /* change code below this line */}
      <input value={this.state.input} onChange={this.handleChange} />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({ 
      input: event.target.value 
    });
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input type="text" value={this.state.input} onChange={this.handleChange}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(event){
    this.setState({input: event.target.value});
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input onChange={this.handleChange} value={this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input : event.target.value
    })    
  }
  
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input type="text" value={this.state.input} onChange={this.handleChange}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


Уроки

П.С. Старайся тоже код вставлять в преттиер, а то читать сложно.

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.onChange = this.onChange.bind(this);
    // change code above this line
  }
  // change code below this line

  onChange(event){
    this.setState({
      input: event.target.value,
    });
  }

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}

        <input value={this.state.input || ""} onChange={this.onChange}/>

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};


Мое решение : П.С. Старайся тоже код вставлять в преттиер, а то читать сложно.

Мое решение : П.С. Старайся тоже код вставлять в п

Что такое преттиер?

Ну, не совсем корректно я это слово выбрал. В редакторах это плагин, который приводит код в порядок по заданным правилам (отступы, переносы, кавычки и т.п.). Здесь имелось ввиду просто в редактор кода вставить, чтобы подсветка была.

Ну, не совсем корректно я это слово выбрал. В реда

RichText

Не получается пройти, запутался в синтаксисе: 

class ControlledInput extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 input: ''
    };
 // Change code below this line
 handleChange(event) {
 this.setState({
 input: event.target.value
    });
}
 // Change code above this line
  }
 // Change code below this line
  <input onChange = {this.handleChange.bind(this)}/>
 // Change code above this line
 render() {
 return (
      <div>
        { /* Change code below this line */}
        <input value = {this.state.input}/>
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Не получается пройти, запутался в синтаксисе: class ControlledInput extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 input: ''
    };
 // Change code below this line
 handleChange(event) {
 this.setState({
 input: event.target.value
    });
}
 // Change code above this line
  }
 // Change code below this line
  <input onChange = {this.handleChange.bind(this)}/>
 // Change code above this line
 render() {
 return (
      <div>
        { /* Change code below this line */}
        <input value = {this.state.input}/>
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Обсуждение задания "Create a Controlled Input"

# Николай Ланец aka Fi1osof
**Lead Fullstack Developer / Ментор / Евангелист современного JS‑стека**

---

## О себе

Я — не просто Senior Developer с 2007 года. Я — тот, кто строит продукты будущего на базе современных технологий и помогает другим подниматься на новую ступень айти-карьеры. Создатель и идейный вдохновитель freecode.academy — платформы, где обучение перестает быть скучной обязаловкой и становится настоящим технологическим приключением.

---

## Мой стек и философия разработки

Основу моего рабочего арсенала составляют:

- [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm), [TypeScript](/technologies/ckcvwwx010kov08009u7y2rav)
- [React](/technologies/ck1fawbdw28v20a891k4wlh27), [Next.js](/technologies/ckg2jd4ffr9260730aog66dri)
- [Node.js](/technologies/ckt55wm59272831wo9gg9r8ynx), [GraphQL](/technologies/ck1fawhqk28vu0a8995lqvlsj), [Apollo Client](/technologies/ck2zdcg0vpvc10a89xjmhj1e0), [Nexus](/technologies/ckl2pbh0fxew60730ifl3zozp), [Prisma](/technologies/ck2zdbmi7pv8r0a89ntc2r0f1)
- DevOps: [Docker](/technologies/ck2y1x9lho9cy0a8953xzfjr8), [docker-compose](/technologies/ck2y1xqino9g80a89tsftxin2), [Caddy](/technologies/ck2zd8ovqpuyl0a8909748sbu), [Ubuntu](/technologies/cktu8giks3593911vmle30ztqxt)
- UI-инструменты: [Styled-Components](/technologies/ckk8myysio7lw0730csszvrdw), [Material-UI](/technologies/ckljv3jwd7bgf0730huxlko9n), [react-hook-form](/technologies/ckmx8cn9fmwrv073032e67722)
- Всё актуальное для разработки, CI/CD и автоматизации 
- Эксперименты с [WebGL](/technologies/ckan9anntc12f08003saqttrq), [A‑Frame](/technologies/ck2tgoiz8j37y0a89c7gxsrxc), [Three.js](/technologies/ck2tgns1nj32z0a89vmw7xw3f), [Unreal Engine 4](/technologies/ck7puswy6g4yb07004cdp6lbr), [Elixir](/technologies/ckn0olavrnnzi0730xs8rctn8), [C++](/technologies/cknin1y8lu2fr07307mskn2fn)

---

## Разработка и менторство

- Более 15 лет **hands-on** разработки и проджект‑менеджмента
- Главный разработчик и преподаватель платформы [freecode.academy](https://freecode.academy)
- **Ведущий менти-пул на платформе** — лично выращиваю новых звезд отрасли

### Мои менти и их результаты

| Менти (ФИО \| username)                               | Уровень | Рейтинг |
|-------------------------------------------------------|---------|---------|
| [Попов Дмитрий \| linklib](/users/cjoe890c706ji0d962oismzoe)           | 3       | 315     |
| [Сэт \| defk1lla](/users/ckzh1ita312978121imr9hpqfc64)                 | 3       | 670     |
| [Ксения Матвеева \| Ксения Матвеева](/users/ckz4awwlh10627771imr4wvpb7cj) | 2       | 0       |
| [Михаил \| Balamut](/users/cl1npq92z10258261vmbq0w6vfh2)               | 2       | 0       |
| [Ольга Ершова \| angel](/users/cjoe87zhk00250d969arluevk)              | 1       | 0       |
| [Егор \| rogedkone](/users/cksrdp47d3308261ijuq7wfrxdl)                | 3       | 0       |
| [Roman \| Roman43](/users/ckur2qtt64721431xoboyjcte52)                 | 2       | 0       |
| [Бут Игорь \| santiment](/users/ckttd9x20893951vmltb8t7sha)            | 1       | 0       |

**Доношу простую мысль: успех — это не магия, это осознанная системная работа и кайф от роста.**
Мои менти выводят решения в продакшн, пробиваются в лидеры рейтингов — кому не хочется быть в такой команде?

---

## Почему я?

- **Прокачаю проект** — от TDD архитектуры до культурного CI/CD
- **Вдохновлю команду** — и научу мыслить по‑новому, где ИИ — напарник, а не угроза
- **Выращу мидлов и сеньоров** — доказано платформой и рейтингами моих учеников

**Сила — в сообществе, а техника — это просто смазка для ваших побед. Присоединяйтесь!**

---

## Контакты

- 📧 [n.lanets@freecode.academy](mailto:n.lanets@freecode.academy)
- Телеграм: [@freecode_academy](https://t.me/freecode_academy)

---

**P.S.**: Мой опыт — ваш драйвер роста. Хотите в команду? Ищете менторство? Пишите. Растём вместе!

# Попов Дмитрий (linklib)
**Frontend-разработчик / Любитель новых фреймворков**

---

## Кратко о себе

За плечами уверенная база по верстке и опыт внедрения современных подходов во Frontend. Люблю исследовать новые технологии, разбираться в реактивности и делать интерфейсы не только быстрыми, но и удобными. Осваиваю не только React и GraphQL, но и Docker, Express.js и прочий профессиональный стек.

---

## Мой стек

- [HTML](/technologies/ck1fasxk228gk0a89k3vnmroa), [CSS](/technologies/ck1fatvnc28jj0a89oymmo65i), [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm), [TypeScript](/technologies/ckcvwwx010kov08009u7y2rav)
- [React](/technologies/ck1fawbdw28v20a891k4wlh27), [Bootstrap](/technologies/ck2tvd5h7jj0g0a89upswbk68), [Material-UI](/technologies/ckljv3jwd7bgf0730huxlko9n)
- [Next.js](/technologies/ckg2jd4ffr9260730aog66dri), [Node.js](/technologies/ckt55wm59272831wo9gg9r8ynx), [Express.js](/technologies/ckt5642ab293031wo9t8wkpj6f)
- [git](/technologies/ck2vblkr8l6x90a89dgkhi2fp), [github.com](/technologies/ck2vbm21fl7240a89djbs77xk), [docker](/technologies/ck2y1x9lho9cy0a8953xzfjr8), [docker-compose](/technologies/ck2y1xqino9g80a89tsftxin2)
- Осваиваю: [Apollo-Client](/technologies/ck2zdcg0vpvc10a89xjmhj1e0), [Prisma-2](/technologies/cklipyix0717l07301c9xenj8), [GraphQL](/technologies/ck1fawhqk28vu0a8995lqvlsj)

...и многое другое!

---

## Кому могу быть полезен?
- В сжатые сроки сверстаю прототип и покажу рабочий результат
- Всем, кто хочет красивый адаптивный интерфейс
- Готов делать всё, кроме скучной рутины (её доверю автоматизации)

**Frontend — моё вдохновение, образование и спортзал мозга! Если хочешь обсудить новую фичу или устроить баттл плагинов — welcome!**

# Андрей (alter_ego)
**Начинающий фронтенд-разработчик / Explorer интерфейсов**

---

## Кто я

Стартовал с крепкой базы HTML и CSS, ворвался в JS, пробую AngularJS и не боюсь новых фреймворков. Верю в силу пет-проектов, где практика — это лучшее обучение.

---

## Мой стек
- [HTML](/technologies/ck1fasxk228gk0a89k3vnmroa)
- [CSS](/technologies/ck1fatvnc28jj0a89oymmo65i)
- [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm)
- [AngularJS](/technologies/ck2tgmhshj2z30a89o14nlxog)

---
Раскачаю интерфейс, приму вызов верстки и не откажусь поучаствовать в чём-то интересном.

# Ксения (ksu)
**Frontend Junior / Github‑энтузиаст**

---

## Кто я

Верстаю, экспериментирую, пишу на JavaScript ES6, работаю с git. Хочу расти дальше.

---

## Стек
- [HTML](/technologies/ck1fasxk228gk0a89k3vnmroa)
- [CSS](/technologies/ck1fatvnc28jj0a89oymmo65i)
- [JavaScript](/technologies/ck2yl86wl0opa0842hiboqgjy)
- [ES6](/technologies/ck3k6yauw06ig0b73k0z3ic22)
- [github.com](/technologies/ck2vbm21fl7240a89djbs77xk)
- [Styled-Components](/technologies/ckk8myysio7lw0730csszvrdw)

---
Frontend — любимый квест, и на каждом уровне я сдаю новые достижения!