Définition

Le state est une instance de la classe React Component. Il peut être défini comme un objet qui contrôle le comportement des composants. Autrement dit, le "state" est un objet qui comporte des informations qui vont changer au cours de la vie des composants.

Modification

Pour faire le lien entre les propriétés d’un objet React et son rendu (le dom réel), il faut :

  • Créer un objet state avec une ou des propriétés 
  • Utiliser ces propriété dans le render
  • Modifier les propriétés de state avec la méthode setState

setState

En résumé,

  • lorsque la valeur à modifie d'une propriété du state dépend de son ancienne valeur, il faut utiliser la fonction "updater" dont la signature est la suivante :  (state, props) => stateChange
    Cf ex 1.
  • lorsque la valeur à modifie d'une propriété du state ne dépend pas de son ancienne valeur, on peut simplement passer un objet en argument à setState. Cf ex 2.

 

Ex 1 - utilisation de setState avec la fonction updater : 

import React, { Component } from 'react';
class App extends Component {
  state = { 
    counter: 0
   }
   handleClickAddButton = () => {
    console.log(`Dans handleClickAddButton`);
    this.setState((state, props) => {
      return {counter: state.counter + 1};
    });
   }
  render() {
    return (
      <>
      <div className="container">
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClickAddButton}>Ajouter 1</button>
      </div>
      </>
    );
  }
}
export default App;

Ex 2 - utilisation de setState avec un objet 

import React, { Component } from 'react';
class App extends Component {
  state = { 
    counter: 0
   }
   
   handleClickSet10Button = () => {
    console.log(`Dans handleClickSet10Button`);
    this.setState({counter: 10});
   }
  render() {
    return (
      <>
      <div className="container">
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClickSet10Button}>Compteur à 10</button>
      </div>
      </>
    );
  }
}
export default App;