Как динамически изменить state в react.js?

@jazmyne 

В React.js state можно изменять с помощью метода setState(). Он выполняет две функции: обновляет значение состояния компонента и отрисовывает компонент заново с учетом изменений.

Чтобы динамически изменить state, нужно вызвать метод setState() со следующим синтаксисом:

1

this.setState({ key: value });

Здесь key - это свойство в state, которое нужно изменить, и value - новое значение для данного свойства.

Пример использования setState() для изменения статуса компонента в React.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();
    this.state = {
      status: 'active'
    };
  }

  handleClick() {
    // Изменяем статус компонента на 'inactive'
    this.setState({ status: 'inactive' });
  }

  render() {
    return (
      
        Status: {this.state.status}
         this.handleClick()}>Change Status
      
    );
  }
}

export default MyComponent;

В данном примере при нажатии на кнопку "Change Status" будет вызываться метод handleClick(), который изменит статус компонента на 'inactive'. Результат изменения состояния будет отображаться в теге .