• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.



J'ai tout compris !

Mis à jour le 07/02/2020

Practice: Add a validation message

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Here's an exercise for you to try out what you just learned!

Every Product in our store should have a name. As it is, the product form can be submitted without a name, and it creates a new product with a blank line in the  name  column.

Change the  ProductForm  component so that it requires a 'name' field before submitting the results, and shows a message if you try to submit the form without a name value. When the user starts typing in the name field, the message should go away (but reappear if they delete all the characters in the name field!).

If you're not sure how to begin, try these four steps:

  1. Add a value to the component's state that represents whether the error is present.

  2. Add a validation function checks for the missing field, sets the error state, and returns a boolean expressing whether the form is valid.

  3. Run the validation function when the user submits the form, and don't allow the save to occur if the form is not valid.

  4. Add an error message in the view that will only appear if the error is present.

Exemple de certificat de réussite
Exemple de certificat de réussite