• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.



J'ai tout compris !

Mis à jour le 07/02/2020

Practice: Extend the form functionality to edit existing products

Connectez-vous ou inscrivez-vous gratuitement 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