5. Ajouter des props par défaut

Il existe une autre subtilité des props que je dois vous présenter. En fait, il est possible de passer des props facultatives à nos composants, et de leur associé une valeur par défaut. Concrètement, cela signifie qu’un composant prévoit de recevoir une prop, mais qu’il peut également fonctionner sans cette prop.

Par exemple, imaginons que nous voulons ajouter une bordure au composant PokemonCard, qui représente un pokémon :

Dans ce cas, nous pourrions définir une prop facultative nommée borderColor. Cette prop aurait pour valeur par défaut « gris ».

Donc si depuis le composant parent nous ne passons aucune prop, alors le composant fils va utiliser la valeur par défaut « gris ». C’est le cas pour Bulbizzare et Carapuce ci-dessus.

Par contre, pour Salamèche, depuis le composant parent on a passé la valeur « vert » à la prop borderColor, et donc cette valeur prend le pas sur la valeur par défaut.

Pour résumé, nous pouvons retenir que si la prop est passé depuis le composant parent, alors nous l’utilisons. Sinon, on utilise la valeur par défaut associé à cette prop.

Je vous propose maintenant d’implémenter ce comportement dans notre application. Nous allons donc rajouter une prop facultative nommée borderColor dans notre composant de carte d’une pokémon pokemon-card.tsx :

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

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

const PokemonCard: FunctionComponent<Props> = ({pokemon, borderColor = '#009688'}) => {
  
  return (
    <div className="col s6 m4">
      <div className="card horizontal" style={{ borderColor: borderColor }}>
        <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;

Premièrement, à la ligne 7, nous définissons une prop comme facultative grâce au point d’interrogation « ? ». C’est une syntaxe propre à TypeScript, qui signifie qu’une variable est facultative. Nous définissons cette prop comme étant une chaîne de caractère.

Ensuite à la ligne 10, on utilise ES6 pour définir une valeur par défaut à notre prop. Si cette prop est transmise depuis un composant parent, alors cette valeur par défaut sera écrasée, sinon borderColor aura pour valeur « #009688 ».

Enfin, à la ligne 14, on applique en JSX un style à une balise. Pour cela, on modifie la propriété de couleur d’une bordure (nommée borderColor, à gauche, comme notre prop), et on lui passe comme valeur la couleur que l’on a déterminée.

Si vous jeter un oeil à votre application, tous les composants auront maintenant la même couleur de bordure verte, car c’est la valeur par défaut « #009688 » que nous avons indiqué.

Et depuis le composant parent pokemons-list.tsx, vous pouvez vous amuser à changer la couleur de toute vos bordures :

// Les importations...

const PokemonsList: FunctionComponent = () => {
  // ...

  return (
    <div>
      <h1 className="center">Pokédex</h1>
      <div className="container"> 
        <div className="row"> 
          {pokemons.map(pokemon => (
            <PokemonCard key={pokemon.id} pokemon={pokemon} borderColor="red"/>
          ))}
        </div>
      </div>
    </div>
  );
}

export default PokemonsList;

À la ligne 12, nous indiquons que toutes nos bordures doivent être rouge désormais. n’hésitez pas essayer d’autres couleurs pour bien assimiler cette nouvelle mécanique !

Toutes nos bordures peuvent devenir rouge facilement !