## Let's start with React => Components, Props, State and filtering

## Un petit tour d'horizon
Tu trouveras dans le dossier src, le fichier app.js (Point d'entrée de l'application). Celui ci importe le jeux de données que nous allons utiliser et qui est stocké dans un fichier *data.json* dans le dossier data. C'est un tableau de 10 fiches d'identité de robot.

## Affichons nos robots
- 1/ Créer une carte simple de robot avec une ```<div>``` et un ```<h2>``` qui affichera le nom du robot directement dans le return de *app.js* avec la méthode `map()`
- 2/ Complète le template avec le username, phone, email et website et ajoute du style
- 3/ Création d'un composant RobotCard avec le template dans *./component/RobotCard.jsx* et remplacement du template par la balise `<RobotCard />`. On pensera à importer le composant dans *App.js* et à ajouter les props `robot` pour le transfert de donnée
- 4/ Création d'un composant `<RobotAdress />` permettant d'afficher les informations de l'adresse (Suite, zipcode, city). Import et mise en place dans le `<RobotCard />`. Puis, on va ajouter un bouton *toggle* permettant d'afficher ou non l'adresse. Ajout d'un state [display, setDisplay] initialisé à false. Onclick sur le bouton, on inverse la valeur de display (** si true, alors false et si false alors true **). Puis on se sert de cette valeur pour afficher ou non les infos adresse avec un opérateur ternaire. Intégrer le css de cette nouvelle étape pour finir.
- 5/ Ajout d'une image de robot à partir de son id dans le composant `<RobotCard />`. On utilisera l'url *https://robohash.org/< L'id du robot >?set=set2* comme source. N'hésites pas à le styliser.

## Filtrons nos robots
- 6/ Ajout d'un input de recherche dans le *app.js*. On memorisera sa valeur dans un state crée pour l'occasion. Pensez à votre style.
- 7/ Implementer le résultat de la recherche directement dans le *return* de *app.js* en ajoutant un  fonction `.filter()` (cf doc => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) et un includes (cf doc => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) dans votre conition.

## Restructurons notre code
- 8/ Passons maintenant notre espace de filtre dans son propre composant. Pour cela il faudra lui passer la valeur du state, ainsi que sa méthode pour la mise à jour.

## Félicitations. Vous venez de faire votre premier moteur de recherche de Robot.