• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/31/22

Practice: Extend the form functionality to edit existing products

Log in or subscribe for free to enjoy all this course has to offer!

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> .

Example of certificate of achievement
Example of certificate of achievement