title: React,useState hook with select tag
body: <p>Can someone please help me with this problem I have of select tag in my product screen that I used to select the quantity of an item. I have tried using context, and use state to change the quantity. That was fine for one item. When I add another  item, All items quantity  change to the quantity of the last item selected.  I am a new programer, and I can't understand what's happening. Can someone please help me with this problem.please look over the code, and let me know why this is happening.localStorage has the right quantity, but the cart has the quantites of the last item.
  thease are the values in local storage:</p>
  <pre><code>name: &quot;Lacoste Free Shirt&quot;, image: &quot;/images/03.jpg&quot;, price: 220, countInStock: 40,…},…]
  0: {name: &quot;Lacoste Free Shirt&quot;, image: &quot;/images/03.jpg&quot;, price: 220, countInStock: 40,…}
  countInStock: 40
  image: &quot;/images/03.jpg&quot;
  name: &quot;Lacoste Free Shirt&quot;
  price: 220
  product: &quot;62c8deb1aeca8a367b2df940&quot;
  qty: &quot;7&quot;
  1: {name: &quot;Nike Slim Pant&quot;, image: &quot;/images/04.jpg&quot;, price: 78, countInStock: 40,…}
  countInStock: 40
  image: &quot;/images/04.jpg&quot;
  name: &quot;Nike Slim Pant&quot;
  price: 78
  product: &quot;62c8deb1aeca8a367b2df941&quot;
  qty: &quot;11&quot;
  </code></pre>
  <p>these quantities are right
  this is the data from the product screen:</p>
  <pre class="lang-js prettyprint-override"><code>import React, {useContext, useEffect, } from 'react';
   import Rating from '../Components/Rating';
  import {Link, useParams} from 'react-router-dom';
  import {useDispatch, useSelector} from &quot;react-redux&quot;;
  import { getProducts } from '../features/products/ProductsSlice'
  import{QtyContext}from &quot;../Components/QtyContext&quot;;
  import {addToCart} from &quot;../features/products/cartSlice&quot;;
  import {useNavigate}from 'react-router-dom'
  import {Store}from '../Store';
  
  
  export default function ProductScreen(props) {
      const {state,dispatch:ctxDispatch}=useContext(Store)
  const {qty,setQty}=useContext(QtyContext)
         const dispatch =useDispatch();
      const {products} =useSelector(state =&gt;state.products)
       const params=useParams()
      const {id:productId} = params;
      
      useEffect(() =&gt; {
          dispatch(getProducts())
       }, [dispatch]);
  
      const navigate=useNavigate()
  const{id}=useParams()
      const product = products.find((x)=&gt; x._id ===(id));
      if (!product){
      return&lt;div&gt; Product Not Found&lt;/div&gt;}
  
      const handelAddToCart = () =&gt; {
          ctxDispatch({addToCart,payload:{...product,qty:1}})
        navigate(`/cart/${productId}?qty=${qty}`);
      };
  
      return (
          &lt;div className={&quot;container&quot;}&gt;
          &lt;Link to =&quot;/&quot;&gt;Back to HomeScreen&lt;/Link&gt;
          &lt;div className = 'row'&gt;
          &lt;div className='col-2'&gt;
           &lt;img className='large' src={product.image} alt={product.name}&gt;&lt;/img&gt;
             &lt;/div&gt;
              &lt;div className='col-2'&gt;
              &lt;ul&gt;
              &lt;li&gt;
              &lt;h2&gt;{product.name}&lt;/h2&gt;
              &lt;/li&gt;
                  &lt;li&gt;
                      &lt;Rating rating={product.rating} numReviews={product.numReviews}&gt;&lt;/Rating&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      Price: ${product.price}
                  &lt;/li&gt;
                  &lt;li&gt;
                      Description:
                      &lt;p&gt;{product.description}&lt;/p&gt;
                  &lt;/li&gt;
              
              
              
              &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div className='col-2'&gt;
  &lt;div className={'card card card-body'}&gt;
  &lt;ul className='box'&gt;
      &lt;li&gt;
          &lt;div className={&quot;&quot;}&gt;
  &lt;div className= 'price2'&gt;Price&lt;/div&gt;
              &lt;div&gt;${product.price} &lt;/div&gt;
  
  &lt;/div&gt;
  
      &lt;/li&gt;
              &lt;li&gt;
  
              &lt;div&gt;Status&lt;/div&gt;
              &lt;div&gt;
                  {product.countInStock&gt;0?(&lt;span className='success'&gt;In Stock&lt;/span&gt;):(&lt;span className='error'&gt;Out Of Stock&lt;/span&gt;)}
              &lt;/div&gt;
  
              &lt;/li&gt;
              &lt;li&gt;
                          &lt;div className=&quot;qty&quot;&gt;
                            &lt;div&gt;Qty&lt;/div&gt;
                            &lt;div&gt;
                              &lt;select
                                value={qty}
                                onChange={(e) =&gt; setQty(e.target.value)}
                              &gt;
                                {[...Array(product.countInStock).keys()].map(
                                  (x) =&gt; (
                                    &lt;option key={x + 1} value={x + 1}&gt;
                                      {x + 1}
                                    &lt;/option&gt;
                                  )
                                )}
                              &lt;/select&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/li&gt;
      &lt;li&gt;
          &lt;button className={'primary block'} onClick={()=&gt;handelAddToCart(productId)}&gt;Add To Cart&lt;/button&gt;
      &lt;/li&gt;
  
  
  &lt;/ul &gt;
  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; );
  }
  
  </code></pre>
  <p>I dont know whats happening.but whenever I add a new item all quanties change to the last item quantity.
  I would upload the cart, but I am new to stack overflow, and I dont know how.
  the cart screen is below:</p>
  <pre><code>import React, { useContext, useEffect } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { Link, useNavigate, useParams } from 'react-router-dom';
  import { addToCart, removeFromCart } from '../Components/cartAction';
  import MessageBox from '../Components/messageBox';
  import { QtyContext } from '../Components/QtyContext';
  import { Button, Card, Col, ListGroup, Row } from 'react-bootstrap';
  
  export default function CartScreen(props) {
    const { setQty } = useContext(QtyContext);
    const { qty } = useContext(QtyContext);
    const params = useParams();
    const { id: productId } = params;
  
    const cart = useSelector((state) =&gt; state.cart);
    const cartItems  = cart;
    const dispatch = useDispatch();
    useEffect(() =&gt; {
      if (productId) {
        dispatch(addToCart(productId, qty));
      }
    }, [dispatch, productId, qty]);
  
    const removeFromCartHandler = (id) =&gt; {
      dispatch(removeFromCart(id));
    };
  
    const navigate = useNavigate();
  
    const checkoutHandler = () =&gt; {
      navigate('/signin?redirect=shipping');
    };
    return (
      &lt;div&gt;
        &lt;title&gt;Shopping Cart&lt;/title&gt;
  
        &lt;h1&gt;Shopping Cart&lt;/h1&gt;
        &lt;Row&gt;
          &lt;Col md={8}&gt;
            {cartItems.length === 0 ? (
              &lt;MessageBox&gt;
                Cart is empty. &lt;Link to='/'&gt;Go Shopping&lt;/Link&gt;
              &lt;/MessageBox&gt;
            ) : (
              &lt;ListGroup&gt;
                {cart.cartItems.map((item,i) =&gt; (
                  &lt;ListGroup.Item key={i}&gt;
                    &lt;Row className='align-items-center'&gt;
                      &lt;Col md={4}&gt;
                        &lt;img
                          src={item.image}
                          alt={item.name}
                          className='img-fluid rounded img-thumbnail'
                        &gt;&lt;/img&gt;{' '}
                        &lt;Link to={`/product/${item.product}`}&gt;{item.name}&lt;/Link&gt;
                      &lt;/Col&gt;
                      &lt;Col md={3}&gt;
                        &lt;Button
                          onClick={() =&gt; setQty(qty - 1)}
                          variant='light'
                          disabled={item.qty === 1}
                        &gt;
                          &lt;i className='fas fa-minus-circle'&gt;&lt;/i&gt;
                        &lt;/Button&gt;{' '}
                        &lt;span&gt;{qty}&lt;/span&gt;{' '}
                        &lt;Button
                          onClick={() =&gt; setQty(qty + 1)}
                          variant='light'
                          disabled={item.qty === item.countInStock}
                        &gt;
                          &lt;i className='fas fa-plus-circle'&gt;&lt;/i&gt;
                        &lt;/Button&gt;{' '}
                      &lt;/Col&gt;
                      &lt;Col md={3}&gt;${item.price}&lt;/Col&gt;
                      &lt;Col md={2}&gt;
                        &lt;button
                          type='button'
                          onClick={() =&gt; removeFromCartHandler(item.product)}
                        &gt;
                          &lt;i className='fas fa-trash'&gt;&lt;/i&gt;
                        &lt;/button&gt;
                        {/* &lt;Button onClick={()=&gt; removeFromCartHandler(item.product)} variant=&quot;light&quot;&gt;
                                                  &lt;i className=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;
                                              &lt;/Button&gt; */}
                      &lt;/Col&gt;
                    &lt;/Row&gt;
                  &lt;/ListGroup.Item&gt;
                ))}
              &lt;/ListGroup&gt;
            )}
          &lt;/Col&gt;
          &lt;Col md={4}&gt;
            &lt;Card&gt;
              &lt;Card.Body&gt;
                &lt;ListGroup variant='flush'&gt;
                  &lt;ListGroup.Item&gt;
                    &lt;h2&gt;
                      Subtotal ({cart.cartItems.reduce((a, c) =&gt; a + qty, 0)} items) :
                      ${cart.cartItems.reduce((a, c) =&gt; a + c.price * qty, 0)}
                    &lt;/h2&gt;
                  &lt;/ListGroup.Item&gt;
                  &lt;ListGroup.Item&gt;
                    &lt;div className='d-grid'&gt;
                      &lt;Button
                        type='button'
                        variant='primary'
                        onClick={checkoutHandler}
                        disabled={cartItems.length === 0}
                      &gt;
                        Proceed to Checkout
                      &lt;/Button&gt;
                    &lt;/div&gt;
                  &lt;/ListGroup.Item&gt;
                &lt;/ListGroup&gt;
              &lt;/Card.Body&gt;
            &lt;/Card&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>