Binding bidirectionnel React

Le binding bidirectionnel en React permet de rafraichir un composant React afin qu’il affiche la valeur d’une variable au fur et à mesure que celle-ci est modifiée. Cela ne se fait pas simplement en modifiant la valeur de cette variable. En effet, on va devoir utiliser un STATE pour pouvoir gérer ce binding bidirectionnel dans notre composant React.

Le State

Le State comme son nom l’indique est un état ou plus précisément une classe javascript qui va pouvoir contenir des objets dont on veut changer et surveiller le changement de valeur ou d’état afin que les composants qui les utilisent se rafraîchissent automatiquement pour continuer d’afficher la dernière valeur de ces objets / variables.

Utiliser un state

Comme un state est surveillé et que chaque modification déclenche le rafraîchissement des composants React, ce state ne doit pas être utilisé à plusieurs endroits. Il est recommandé de le centraliser dans l’App.js et donc dans notre composant principal.

Pour se faire, on va modifier un peu notre composant App.js qu’on avait créé dans nos précédents tutos : « Créer un composant dans React » et « Passer des valeurs à un composant React ».

Voici comment déclarer notre state:

import React, { useState } from 'react';
import...

function App() {
  
  const [articleState, setArticleState] = useState({
    articles:[
     {name:"Casquette", price:"20.00", description:"Casquette noire XL"},
     {name:"Basquettes", price:"40.00", description:"Basquettes bleues pour trail"}
  ]});

  return (
    <div className="App">
      <Article name={articleState.articles[0].name} price={articleState.articles[0].price}>{articleState.articles[0].description}</Article>
      <Article name={articleState.articles[1].name} price={articleState.articles[1].price}>{articleState.articles[1].description}</Article>
    </div>
  );
}

Pour utiliser le state, on va utiliser useState qui doit donc être importé depuis le package react via le nouvel import ci-dessus.

Vous pouvez également voir ici qu’on déclare 2 constantes :

• articleState qui représente notre objet state. Celui-ci va contenir notre liste d’articles.
• setArticleState est une fonction retournée par useState pour permettre d’agir sur notre state (on verra cela dans la partie suivante).

On a donc un articleState qui contient nos articles. C’est donc lui qu’on va maintenant utiliser pour afficher nos articles d’où le return qu’on a modifié.

Modifier les articles

Maintenant que nous savons comment afficher notre state, il est temps de passer au plus intéressant : pouvoir le modifier pour que les composants se rafraîchissent et affichent bien la modification dans notre résultat HTML.

Créons dans notre App.js une textbox pour modifier le nom de notre premier article:

return (
    <div className="App">
      Change name of article 1 : <input type="text" name="changeArticleName" onChange={changeArticleName} />
    ...
);

Ici rien de particulier, on a créé un input type TEXT et on lie l’événement onChange à une méthode changeArticleName() (sans les parenthèses car on ne veut pas exécuter maintenant la méthode mais bien la lier à l’événement).

Voici à quoi va ressembler cette méthode (je remettrai le code complet en bas de l’article):

  const changeArticleName = event => {
    const modif = { ... articleState };
    modif.articles[0].name = event.target.value;
    setArticleState(modif);
  };

Dans cette méthode, on voit qu’on crée une copie de notre articleState car on ne peut pas le modifier directement sinon cela n’aura pas l’effet escompté. Pour se faire, on utilise l’opérateur « … ».

Ensuite, on modifie le nom de notre articles[0] en utilisant la valeur de notre textbox via event.target.value.

Enfin, on appelle la méthode qu’on a stockée dans setArticleState() au tout début quand on a fait le useState(…). C’est de cette manière qu’on passe la modification et que l’interface se rafraîchit toute seule.

En résumé

En résumé, voici le code complet de notre App.js:

import React, { useState } from 'react';
import './App.css';
import Article from './Article/Article';

function App() {
  
  const [articleState, setArticleState] = useState({
    articles:[
     {name:"Casquette", price:"20.00", description:"Casquette noire XL"},
     {name:"Basquettes", price:"40.00", description:"Basquettes bleues pour trail"}
  ]});

  const changeArticleName = event => {
    const modif = { ... articleState };
    modif.articles[0].name = event.target.value;
    setArticleState(modif);
  };

  return (
    <div className="App">
      Change name of article 1 : <input type="text" name="changeArticleName" onChange={changeArticleName} />
      <Article name={articleState.articles[0].name} price={articleState.articles[0].price}>{articleState.articles[0].description}</Article>
      <Article name={articleState.articles[1].name} price={articleState.articles[1].price}>{articleState.articles[1].description}</Article>
    </div>
  );
}

export default App;

On fait donc plusieurs choses pour utiliser les states:

• import de useState
• déclaration de 2 constantes résultant de l’appel à useState() :
  • notre state qui va contenir nos données à surveiller et mettre à jour : articleState
  • une fonction permettant de modifier notre state : setArticleState
• l’appel à cette fonction setArticleState pour modifier nos objets et ainsi provoquer un rafraichissement dynamique de nos composants react -> ici via une textbox dont on s’abonne à l’événement onChange.

Voilà, une fois l’exercice fait de votre côté, vous verrez que cela devient facile et plus clair. Cela n’a rien de compliqué mais il faut bien comprendre l’utilisation du state pour ce binding bidirectionnel.

J’espère que cet article vous aura plu. N’hésitez pas à liker, commenter et partager cet article et à vous abonner à ce blog pour ne rien manquer. Je vous dis à très bientôt sur le blog « Developpement-web-facile.com« .