Dans cette quête, tu vas apprendre à créer un formulaire complet en React. Tu découvriras comment gérer le submit, et comment récupérer les informations. Tu seras prêt à connecter ton application React à un backend Node.

Objectifs

• Afficher une page d'enregistrement SignUp avec la possibilité d'y renseigner un email, password,passwordbis(vérification), name, lastname.

Création de tous les <input />

Afin d'afficher sur la page l'ensemble des champs, tu dois ajouter dans ton composant SingUp, à l'intérieur de ton formulaire l'ensemble des 5 champs <input />. Tu peux rajouter une balise <input type="submit" value="Soumettre"/> qui instancie un bouton pour soumettre le formulaire.

Afficher les informations dans le titre

L'état du composant sera composé des différents champs de notre formulaire. Il aura le format suivant :

{
  email: "mon@email.com",
  password: "monPassw0rd",
  name: "James",
  lastname: "Bond"
}

À chaque changement dans le formulaire, tu devras mettre à jour l'état. L'état devra s'afficher dans la balise titre <h1 /> à l'aide de JSON.stringify(this.state,1,1).JSON.stringify() permet de transformer un objet JSON en chaîne de caractères.

Création d'une fonction de demande d'enregistrement

À ce stade, tu dois avoir

• une balise titre <h1 /> affichant l'état global

• un formulaire avec 5 champs

• un bouton de soumission

Pour finaliser le formulaire, tu devras rajouter une fonction d'envoi d'information handleSubmit lorsque l'on soumet le formulaire.

Attention : onSubmit ne se place pas sur le bouton.

Nous n'avons pas encore de serveur, tu devras dans la fonction handleSubmit afficher en console.log() l'état du composant.

Challenge

Show me your property

• Construis ta page SignUp afin de proposer un formulaire d'inscription
• Propose de renseigner

un emailun mot de passeun mot de passe de vérificationun prénomun nom

• Affiche l'état du composant qui se met à jour à chaque modification des champs

Critères de validation

• Afficher un formulaire avec les 5 champs ci-dessus
• Une fois renseigné, lorsque je souhaite soumettre le formulaire, le json s'affiche dans la console du navigateur.