<section id="description"> <p>Одна из наиболее важных тем в React - это состояния (<code>state</code>). Состояние может в себя включать любые данные, о которых должно знать ваше приложение, которые могут со временем меняться. По сути своей state - это обычный объект. Состояния нужны, чтобы ваши приложения отвечали на изменения состояния и при необходимости обновляли интерфейс. React предлагает хорошее решение для управления состояниями в современных веб-приложениях. Вы создаете состояние в компоненте React, объявляя свойство <code>state</code> в классе компонента в его методе <code>constructor</code> . Это инициализирует компонент со свойством <code>state</code> при его создании. Объявление выглядит следующим образом: <pre class="language-js"><code>constructor(props) { super(props);

this.state = { // описываем ваше состояние здесь } } </code></pre>

У вас есть доступ к объекту <code>state</code> на протяжении всего срока службы вашего компонента. Вы можете обновить его, отобразить в пользовательском интерфейсе и передать его в качестве свойств в дочерние компоненты. Объект <code>state</code> может быть как сложным, так и простым, как вам нужно. Обратите внимание, что вы должны создать компонент класса за счет расширения <code>React.Component</code> для того , чтобы создать <code>state</code>.</p>

<p> <b>Замечание: </b> на самом деле свойство <code>this.state</code> напрямую менять нельзя. Для изменения состояния используется специальный метод <code>this.setState()</code>, который будет рассматриваться далее. Но важно понимать, что даже с использованияем этого метода, мы не меняем свойство <code>this.state</code>, а создаем новое. То есть в метод <code>this.setState()</code> мы передаем новые значения состояния, Реакт делает копию текущего состояния (и это уже новый объект состояния) и дописывает переданные нами свойства в него (дополняя или обновляя его свойства). Это очень важно понимать. </p> </section>

<section id="instructions"> <p>В редакторе кода есть компонент, который пытается отобразить свойство <code>name</code> из своего <code>state</code> . Однако <code>state</code> не определено. Инициализируйте компонент с <code>state</code> в <code>constructor</code> и присвойте свое имя свойству <code>name</code> .</p></section>