Product item on react emoji restaurant exercise

README.md

Remember:

1. In App create a method to handle the action that comes from ProductItem, and set it as a prop
2. Connect ProductItem form submission method, with a prop that comes from App.
3. In App, in the method that you created update the state adding the item to the cart
4. Pass the cart items information (remember that we need name, quantity and subtotal) to Cart component
5. In cart loop through the items :)

form.jsx

import React from 'react'
import './form.css'

const Form = ({ onInputChange, onSubmit, quantity }) => {
    return (
      <form onSubmit={onSubmit} className="cart-form">
        <input type="number" name="itemQuantity" onChange={onInputChange} value={quantity} min="1" />
        <button>Add</button>
      </form>
    )
}

export default Form

product-item.jsx

import React from 'react'
import './product-item.css'
import Form from './form'

class ProductItem extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      itemQuantity: 0
    }
  }

  handleSubmit = (event) => {
    event.preventDefault()
    
    // here get the quantity from the state and send it to the parent
  }

  handleChange = (event) => {
    const { value, name } = event.target
    this.setState({
      [name]: value
    })
  }

  

  render () {
    const { itemQuantity } = this.state
    const { title, emoji, description, price, special, quantity } = this.props
  return (
    <li className="product-item">
      <div className="product-content">
        <div className="product-image">{emoji}</div>
        <div>
          {special && (<span className="product-special">🌟 Special</span>)}
          <h2 className="product-title">{title}</h2>
          <p className="product-description">{description}</p>
        </div>
      </div>
      <div>
        <div className="product-quantity">{quantity} available</div>
        <div className="product-price">{price} euros each</div>
        <Form onInputChange={this.handleChange} quantity={itemQuantity} onSubmit={this.handleSubmit} />
      </div>
    </li>
  )
}
}

export default ProductItem