Fil d'Ariane
Mis à jour le mardi 7 mars 2017
  • 20 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Practice: Extend the form functionality to edit existing products

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

Right now we can create and delete products, but we can't change them once they exist.

See if you can find a minimum set of changes that will allow you to edit products with the same form we use to create new ones, without any changes to the form elements as they are currently written. Here are some recommendations:

  • Add "edit" buttons next to the "delete" buttons in  ProductRow.js .

  • When clicked, an edit button should set a value of state on the  <Products>  component, e.g.  this.state.formProduct , that indicates which product should populate the form  Since clicking different edit buttons should repurpose the form, you will need a way to update the form's state when the  formProduct  prop is changed. This doesn't happen automatically, but React provides a lifecycle hook that will allow you to call  setState  whenever a prop is changed. It's called componentWillReceiveProps.

  • Hitting save on the form should update the products model on the  <Products>  component, and then reset the form to blank values and allow it to create new products. You can use the product's id to keep track of which product to change in the data model, and you can use the absence of an id to indicate when a new product (with a new unique id!) should be created.

  • The point of this exercise is to make the form behave differently without adding components or changing the element markup in  <ProductForm> .

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