6. Ajouter de l’interactivité sur nos pokémons

Je vous propose de reprendre la capture d’écran ci-dessous, que nous avons déjà vu précédemment :

Pour le moment, nous devons passer la couleur de nos bordures depuis le composant parent, sinon c’est la couleur par défaut définie dans le composant PokemonCard qui est appliqué. Ce que je vous propose maintenant, c’est d’appliquer la couleur de la prop uniquement lorsque l’utilisateur survol la carte d’un pokémon avec sa souris. C’est-à-dire que de base toutes les bordures sont grises, comme nous l’avons défini précédemment dans le code CSS, et qu’ensuite la couleur est modifiée en fonction des actions de l’utilisateur.

Nous allons donc devoir réagir à deux événements :

  • mouseEnter : Lorsque le curseur de l’utilisateur survol une carte, alors on applique la couleur de la prop.
  • mouseOver : Lorsque le curseur de l’utilisateur quitte la carte, remettre la couleur initiale de la bordure.

J’ai donc ajouté deux gestionnaires d’événements, showBorder et hideBorder, dans le composant PokemonCard :

import React, { FunctionComponent, useState } from 'react';
import Pokemon from '../models/pokemon';
import './pokemon-card.css';

type Props = {
  pokemon: Pokemon,
  borderColor?: string
};

const PokemonCard: FunctionComponent<Props> = ({pokemon, borderColor = '#009688'}) => {

  const [color, setColor] = useState<string>();

  const showBorder = () => {
    setColor(borderColor);
  };

  const hideBorder = () => {
    setColor('#f5f5f5'); // On remet la bordure en gris.
  };

  return (
    <div className="col s6 m4" onMouseEnter={showBorder} onMouseLeave={hideBorder}>
      <div className="card horizontal" style={{ borderColor: color }}>
        <div className="card-image"> 
          <img src={pokemon.picture} alt={pokemon.name}/>
        </div>
        <div className="card-stacked">
          <div className="card-content">
            <p>{pokemon.name}</p>
            <p><small>{pokemon.created.toString()}</small></p>
          </div>
        </div>
      </div> 
    </div>
  );
}

export default PokemonCard;

Dans ce code, nous avons ajouté la gestion de deux événements à la ligne 23. Le procédé pour interagir avec les événements n’est pas nouveau.

La particularité de ce code, c’est que nous avons ajouté un état à la ligne 12, pour stocker la couleur actuelle de la bordure. En effet, nous avons dissocié la couleur issue de prop d’entrée borderColor, de la couleur actuel de la bordure, étant donnée que cette couleur « bouge » dans le temps, en fonction des interactions de l’utilisateur. Nous sauvegardons donc la valeur initiale de la prop dans borderColor, et la couleur courante de la bordure dans le state nommée color.

Si vous retournez dans votre navigateur pour visualiser votre application, vous verrez que la couleur de bordure de vos pokémons change lorsque vous les survolez avec votre curseur. Bravo ! 👍

Nous avons vus beaucoup de choses sur les possibilités offertes par les props, et j’espère que cela ne fait pas trop nouveautés d’un coup. De toute façon, il vous faudra un peu de temps pour mieux assimiler toutes ces nouveautés, mais je pense que vous avez déjà compris les principaux mécanismes, et c’est ça le plus important.