Одна из наиболее важных тем в React - это состояния (state). Состояние может в себя включать любые данные, о которых должно знать ваше приложение, которые могут со временем меняться. По сути своей state - это обычный объект. Состояния нужны, чтобы ваши приложения отвечали на изменения состояния и при необходимости обновляли интерфейс. React предлагает хорошее решение для управления состояниями в современных веб-приложениях. Вы создаете состояние в компоненте React, объявляя свойство state в классе компонента в его методе constructor . Это инициализирует компонент со свойством state при его создании. Объявление выглядит следующим образом:

constructor(props) {
  super(props);
this.state = {
// описываем ваше состояние здесь
}
}

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

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

В редакторе кода есть компонент, который пытается отобразить свойство name из своего state . Однако state не определено. Инициализируйте компонент с state в constructor и присвойте свое имя свойству name .