how to update specific index of integer array in functional component setState in react js

user_8183167 0
Viewed 1186

first i make price int array and store int numbers in hook only once then i want to update specific index of that price array in update value but didnt able to update setPrice specific index instead it return me to array with only one value but i want all values with updated index value like [0,3,4,5,6] update id 1 then in my logic multiply by 2 it should do [0,6,4,5,6] but it return me only [6]

import React, {useEffect,useState,useContext } from 'react';
import {Cartlist} from '../Global/CartContext.js';
const Cart=()=>{
  const {ShoppingCart,totalprice,quantity,dispatch} = useContext(Cartlist);
  const [price,setPrice]=useState([])
  const Style={
    width:'100px',
    height: '100px',
  }
  useEffect(()=>{
    ShoppingCart.map((products)=>{
      setPrice(prev=>[...prev,products.price]);
    })
  },[])
  const updatevalue=(e)=>{
    ShoppingCart.map((products)=>{
      if (e.target.id===products.id){
          setPrice(price=>price[products.id-1]*2);
      }
  })
  }
  return (
    <div className='container'>
      {ShoppingCart.length > 0 ?
        ShoppingCart.map((products)=>(
          <div>
            <span><img style={Style} src={products.image}></img></span>
            <span>{price}</span>
            <span>{quantity}</span>
            <span><button id={products.id} onClick={updatevalue}>+</button></span>
          </div>
        ))
      :''}
    </div>
  )
}
export default Cart
react-hooks reactjs javascript
1 Answers

You can simply pass the index to the updatevalue when the cart is mapped, and update the price array at that index. convert updatevalue to a curried function to consume the index and return the event handler.

const updatevalue = index => () => {
  setPrice(prices => prices.map((price, i) => i === index ? price * 2 : price));
}

...

return (
  <div className='container'>
    {ShoppingCart.map((products, i)=>( // <-- cart index
      <div>
        <span>
          <img style={Style} src={products.image} />
        </span>
        <span>{price}</span>
        <span>{quantity}</span>
        <span>
          <button onClick={updatevalue(i)}>+</button> // <-- pass index to handler
        </span>
      </div>
    ))}
  </div>
)
user_86908570
Related