react snippet

// this is just the happy paths

/* PRODUCT COMPONENT */
class Product extends Component {
  state = {
     products: PRODUCTS,
     editProduct: {} // I added a property to the component state
  }
  
   // this method gets called when edit button is clicked
   handleEdit = (product) => {
    this.setState({editProduct: product})
  }
  
  render() {
    <ProductForm editProduct={editProduct} />
  }
}


/* PRODUCT FORM COMPONENT */
class ProductForm extends Component {
  
  // the most important part of the code
  // I did not use componentWillReceiveProps() because it is deprecated
  componentDidUpdate(prevProps) {
  if (prevProps.editProduct !== this.props.editProduct) {
    this.setState({product: this.props.editProduct})
  }
}

  render() {
  // code ....
  }
}