Local state (локальный стейт)

Local state подходит для мелких изменений на странице, которые не нужно передать вверх, чтобы потом куда-то передать, так как им управлять не очень удобно. Например, он подходит для расскрытия меню, набора текста в инпуте и т.д.

Локальный стетй прописывается в классе, как обычное свойство:

class ProfileStatus extends React.Component {
  state = {
    editMode: false
  }
render() {
  return (...)
}

Пример, как можно изменять локальный стейт:

1. Неправильно (метода forceUpdate) следует избегать:

   class ProfileStatus extends React.Component {
     state = {
       editMode: false
     }
   
     activateEditMode() {
       this.state.editMode = true;
       this.setState({
         editMode: true
       })
     } ...

   2. Правильный метод (применение метода setState):

   class ProfileStatus extends React.Component {
     state = {
       editMode: false
     }
   
     activateEditMode() {
       this.state.editMode = true;
       this.setState({
         editMode: true
       })
     }

Если мы метод прописываем вот таким образом, как на последнем примере, то теряется this. Поэтому нужно делать либо стрелочой функцией activateEditMode = () => {...}

либо потом при вызове бандить this (можна и под стейтом его забандить)
 <span onDoubleClick={ this.activateEditMode.bind(this) }>{this.props.status}</span>