Exercice 08 - Première application avec Toolpad Studio

À l'aide de Toolpad Studio vous devez recréer l'interface de l'exercice précédent avec de petites modifications.

• Une zone de texte permet d'inscrire le nom d'un pays en français.
• Utilisez la route suivante pour récupérer les résultats quand on clique sur un bouton.

https://restcountries.com/v3.1/translation/:nomDuPays

• Cette route peut retourner plus d'un résultat. Pour gérer cela, nous allons utiliser un composant Select où nous afficherons chaque pays retourné par la recherche.
• Ajouter un composant Select
• Utilisez l'expression suivante dans le transform de la requête pour remplir le Select

return data.map((pays) => {
  return {
    label: pays.translations.fra.official,
    value: pays.cca2
  }
});

• La valeur cca2 est le code de pays de 2 lettres et le label est le nom officiel en français de chaque pays.
• Ensuite quand on sélectionne un pays dans le Select lancez une seconde requête qui va récupérer le drapeau, la capitale et la population du pays.
• Par défaut dans le Select le premier pays de la liste devrait être sélectionné.

Voici deux exemples de résultats: