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?