How to update a state in react?

42 views Asked by At

I am working on a small react e commerce project and while working on carts component I faced the following issue. I want users to be able to select the number of items for a specific item but I am facing an issue of that selected number not updating. The following is small code to see

type ItemQuant = {
    [itemId:string]:number
}
function MyCart() {
    const [numItems,setNumItems] = useState<ItemQuant>({})
    const dispatch = useDispatch<AppDispatch>()
    let tp=0
    useEffect(()=>{
        dispatch(fetchCartItems(userId as string))
    },[dispatch])

    const cartfromreduxData = useSelector(cartDetaSelect)
    cartfromreduxData.carts.map((item:Cart)=>{
        numItems[item.id]=item.qty
        })
   const handleSelectAmount = (itemId: string,  event:React.ChangeEvent<HTMLSelectElement>) 
     => {
        setNumItems(prevQuantities => ({
          ...prevQuantities,
          [itemId]: parseInt(event.target.value),
        }))}
     return (
    <div className='flex flex-col'>
        {
            cartfromreduxData?.carts?.length>0?
           { 
                    cartfromreduxData.carts.map((cartProducts,index)=>(
                        <tr key={index} className=''>
                             <h1 className=' mr-2'>{Number(cartProducts?.product?.[0]?.price)?.toLocaleString("en-US")}</h1>
                                            <select value={numItems[cartProducts.id]}   onChange={(e)=>handleSelectAmount(cartProducts?.id,e)}>
                                                {Array.from({length:cartProducts.product?.[0].quantity},(_,index)=>index+1).map(item=>(<option value={item}>{item}</option>))}
                                            </select>
                            </tr>
                </div>}

what ever value I select the numItems doesn't change at all even though , event.targe.value actually changes. So, what could be causing this problem?

0

There are 0 answers