Hello les codeurs,

Comprendre le fonctionnement de React n’est pas forcément évident pour les développeurs débutants, ni même parfois pour les confirmés! Pour autant, avoir une bonne compréhension globale du framework JS vous permettra de penser et construire des applications React efficaces et robustes. C’est pourquoi je vous propose de décortiquer les principes de base de ReactJS ensemble dans cette série d’articles.

Aujourd’hui, nous allons aborder une des notions essentielles à connaitre pour comprendre React: le “state”. Le state ou l’état en français va être pour un composant donné un objet accessible uniquement depuis ce composant, où l’on va pouvoir stocker les données que nous voudrons utiliser à travers notre composant.

La création du state

Il est important de préciser avant toute chose que le state va uniquement être utilisable dans les composants “stateful”, donc les composants créés à l’aide d’une classe javascript. On aura donc:

class MonComposant extends React.Component {
  // On va créer notre state dans la méthode constructor() de notre composant
  constructor(props) {
    super(props); // Nous permet d'utiliser les méthode de React.Component

    this.state = {
      // On stocke ici notre data
      monTexte: "Ceci est mon texte."
    };
  } 
}

Utilisation du state

La data stockée dans le state sera accessible via l’invocation this.state, par exemple dans notre exemple ci-dessus, on utilisera this.state.monTexte pour afficher notre texte dans un <div>. En utilisant la notation “{ }”, cela nous donne:

<div>{this.state.monTexte}</div>

De la même manière, on va pouvoir afficher dynamiquement des éléments dans notre composant grâce à une combinaison de l’utilisation du JSX et du state:

{
  // Si l'attribut "afficherMonElement" est égal à true
  // alors on affiche notre div
  (this.state.afficherMonElement === true) &&
  <div>Voici mon élément !</div
}

Modification du state

Lorsqu’un attribut du state est modifié, un re-rendering va être déclenché dans notre composant, qui sera mis à jour avec la nouvelle valeur du state. C’est ce qui va nous permettre d’afficher ou non certaines parties de notre composant, par exemple.
Attention: le state devra uniquement être modifié via la méthode this.setState à laquelle on passera un objet avec l’attribut à modifier et la nouvelle valeur à appliquer:

...
// On déclare notre state dans le constructor() de notre composant avec
// afficherMonElement égal à true
this.state = { afficherMonElement: true };
...
{
  // this.state.afficherMonElement est égal à `true` donc notre bouton sera affiché
  (this.state.afficherMonElement === true) &&
  // Mais si l'on clique sur le bouton, this.setState va faire passer la valeur de afficherMonElement 
  // à `false`, et déclencher un re-rendering: notre élément ne sera plus affiché
  <button onClick={() => { this.setState({ afficherMonElement: false }) }}>Voici mon élément !</div
}
...

Le state React est donc un super outil pour tout ce qui a trait à la manipulation du DOM. Mais il y a encore beaucoup à dire sur le sujet et de nombreux cas particuliers d’utilisation que nous verrons dans un prochain article les fonctionnalités avancées du state React. Stay tuned !

Benjamin