How to pass props to a modal

Question

I have a shopping application where I map over some products and render them on screen. users can increase/decrease quantity. when the quantity gets to 1 and the user hits decre

Answer 1

I faced a similar scenario recently. I managed it using redux/global state as I had to keep track of many modals. Similar approach with local state

//****************************************************************************/

constructor(props) {

    super(props)


    this.state = {
      isModalOpen: false,
      modalProduct: undefined,
    }
}

//****************************************************************************/

render() {

    return (
        
 Bag 
        {this.state.isModalOpen & (
           this.setState({ isModalOpen: false, modalProduct: undefined})
            deleteProduct={ ... }
          />
        )

        {bag.products.map((product, index) => (
        

            
{product.name}
            
£{product.price}
            

             Quantity:{product.quantity} 
             this.props.incrementQuantity(product, product.quantity += 1)}> + 
             this.decrementQuantity(product)}> -  // <----
            
        
        ))}
    )
}

//****************************************************************************/

decrementQuantity(product) {

    if(product.quantity === 1) {
        this.setState({ isModalOpen: true, modalProduct: product })
    } else {
        this.props.decrementQuantity(product)
    }
}