title: Add products to the cart with different properties
body: <p>I made a select box in the card, with properties from db and I have add/remove buttons. But I can't make all this work properly. Cause It should work like this: choose color/price in a select box, then add/remove products with buttons and cart get those products with different properties(color, price)</p>
  <p><a href="https://i.stack.imgur.com/gzGkb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gzGkb.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/e9p9e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e9p9e.png" alt="enter image description here" /></a></p>
  <p>/src/app.js</p>
  <pre><code>const {getData} = require('./db/db');
  const products = getData();
  
      function App() {
        const [cartItems, setCartItems] = useState([]);
        const onAdd = (product) =&gt; {
          const exist = cartItems.find((x) =&gt; x.id === product.id);
          if (exist) {
            setCartItems(
                cartItems.map((x) =&gt;
                  x.id === product.id ? {...exist, qty: exist.qty + 1} : x
              )
            );
          } else {
            setCartItems([...cartItems, {...product, qty:1}])
          }
        };
        const onRemove = (product) =&gt; {
          const exist = cartItems.find((x) =&gt; x.id === product.id);
          if (exist.qty === 1) {
            setCartItems(cartItems.filter((x) =&gt; x.id !== product.id));
          } else {
            setCartItems(
                cartItems.map((x) =&gt;
                  x.id === product.id ? {...exist, qty: exist.qty - 1} : x
                )
            );
          }
        };
      
        return (
        &lt;&gt;
          &lt;h1 className='heading'&gt;Lorem&lt;/h1&gt;
          &lt;Cart cartItems={cartItems}/&gt;
          &lt;div className='cards_container'&gt;
            {products.map((product) =&gt; {
              return (&lt;Card product={product}
                        key={product.id}
                        onAdd={onAdd}
                        onRemove={onRemove}
                   /&gt;
              );
            })}
          &lt;/div&gt;
        &lt;/&gt;
      )
      }
  </code></pre>
  <p>db example</p>
  <pre><code>{
      title: 'Title1',
      id: 1,
      desc: 'Lorem ipsum',
      price: ['200', '250'],
      color: ['Grey', 'Red', 'Black', 'Yellow', 'Brown'],
      image: 1Img
  }
  </code></pre>
  <p>/src/components/card/card.jsx</p>
  <pre><code>function Card({product, onAdd, onRemove}) {
      const [count, setCount,] = useState(0);
      const {title, image, price, color, desc, id} = product
  
      const handleIncrement = () =&gt; {
          setCount( count + 1)
          onAdd(product)
      };
      const handleDecrement = () =&gt; {
          setCount( count - 1)
          onRemove(product)
      };
  
          return (
          &lt;div className='card'&gt;
              &lt;span className={`${count !== 0 ? 'card_badge' : 'card_badge-hidden'}`}&gt;
                  {count}
              &lt;/span&gt;
              &lt;div className=&quot;image_container&quot;&gt;
                  &lt;img src={image} alt={title} /&gt;
              &lt;/div&gt;
              &lt;h4 className='card_title'&gt;
                  {title}
              &lt;/h4&gt;
              &lt;p className='card_desc'&gt;
                  {desc}
              &lt;/p&gt;
              &lt;span className='card_id'&gt;
                  {id}
              &lt;/span&gt;
              &lt;div className='card_color_price'&gt;
                  &lt;form id=&quot;app-cover&quot;&gt;
                      &lt;div id=&quot;select-box&quot;&gt;
                          &lt;input type=&quot;checkbox&quot; id=&quot;options-view-button&quot;/&gt;
                              &lt;div id=&quot;select-button&quot; className=&quot;brd&quot;&gt;
                                  &lt;div id=&quot;selected-value&quot;&gt;
                                      &lt;span&gt;Choose Color&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div id=&quot;options&quot;&gt;
                                  &lt;div className=&quot;option&quot;&gt;
                                      &lt;input className=&quot;s-c top&quot; type=&quot;radio&quot; name=&quot;platform&quot; value=&quot;grey&quot;/&gt;
                                          &lt;input className=&quot;s-c bottom&quot; type=&quot;radio&quot; name=&quot;platform&quot; value=&quot;grey&quot;/&gt;
                                              &lt;span className=&quot;label&quot;&gt;{color[0]} | {price[0]}$&lt;/span&gt;
                                              &lt;span className=&quot;opt-val&quot;&gt;{color[0]} {price[0]}$&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div id=&quot;option-bg&quot;&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div className='btn_container'&gt;
                  &lt;Button title={'+'} type={'add'} onClick={handleIncrement}/&gt;
                  {count !== 0 ?(
                      &lt;Button title={'-'} type={'remove'} onClick={handleDecrement}/&gt;
                  ) : (
                      ''
                  )}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>/src/components/cart/cart.jsx</p>
  <pre><code>function Cart({cartItems, onCheckout}) {
      const totalPrice = cartItems.reduce((a, c) =&gt; a + c.price[0] * c.qty, 0);
  
      return (
          &lt;div className='cart_container'&gt;
              &lt;br/&gt;
              &lt;Button
                  title={`${cartItems.length === 0 ? &quot;Cart is empty&quot; : &quot;Cart&quot; + '\n' + &quot;Total price: $&quot; + totalPrice} `}
                  type={&quot;checkout&quot;}
                  disable={cartItems.length == 0 ? true : false}
                  onClick={onCheckout}
              /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>