useContext¶

Une façon de passer des données d'un élément parent vers un élément enfant est via les props. Le flux normal de données dans React est de haut en bas. Les éléments en bas ne peuvent pas influencer les données venant de plus haut.

Lorsque c'est requis pour un élément enfant d'influencer les données venant d'un parent, React offre une fonctionnalité qui se nomme contexte. Le contexte rend possible la mise à jour d'états par tous les sous-éléments selon les besoins.

Prenons l'exemple suivant :

graph TD
  A[Home] --> B[Panier];
  A[Home] --> C[Fiche];
  B[Panier] --> D[Fiche];

L'élément Home a un panier contenant les items désirés par l'utilisateur. L'élément Fiche représente un item avec une photo, une description et un prix. L'élément Panier contient les fiches des items ajoutés par l'utilisateur.

Si nous voulons que le bouton Ajouter au panier de l'élément Fiche puisse influencer le contenu du Panier, il faut créer un contexte :

graph TD
  Z[ContextePanier] --> A[Home];
  A[Home] --> B[Panier];
  A[Home] --> C[Fiche];
  B[Panier] --> D[Fiche];

Tous les éléments sous ContextePanier peuvent accèder au contenu et le modifier au besoin. Dans cette situation, la liste des items au panier vient du contexte et est utilisé dans l'élément Panier alors que Fiche s'ajoute ou se retire du panier via le contexte.

Démo de useContext¶

Voici les éléments pertinents pour l'utilisation de contexte :

{!chapeaux/src/contexts/panier.context.tsx!}

{!chapeaux/src/App.tsx!}

{!chapeaux/src/components/panier.component.tsx!}

{!chapeaux/src/components/fiche.component.tsx!}

Se connecter à un API¶

Il est préférable d’utiliser la librairie Axios pour aller chercher vos données de l’API :

axios.get('https://bieres.profinfo.ca/api/bieres').then((response) => {
  setListeBieres(response.data.bieres);
});