OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I update a particular item in useState Array in Reactjs

  • Thread starter Thread starter princekings
  • Start date Start date
P

princekings

Guest
So, I have a useState that contains data like this:

Code:
const [orderData, setOrderData] = useState({
   demoData1: '',
    demoData2: '',
    demoData3: '',
    demoArrayData: [{itemName: '', itemNumber: ''}]
 });

I have an onClick function that I would like to use to update the demoArrayData. However, I want to check if the item I want to add into the demoArrayData already exist, if it already there in the array, update it with the latest information and return both the updated item and other items there. If the item is not on the array, add it to the array and return both the newly added item and other items there before. I have this onClick function:

Code:
const handlePackageSizeSelection = (selectedItem: number, itemIndex: number, selectedItemName: string, selectedItemPrice: string )=>{
  

    const orderedListInfo: orderedItemListAttributes = {
        orderedItemName: selectedItemName,
        orderedQuantity: selectedItem?.toString(),
        orderItemPrice: selectedItemPrice,
        orderItemSelectedIndex: itemIndex?.toString()
    }
     setOrderData({...orderData, demoArrayData:[...orderData?.orderedItemList as [], orderedListInfo]})
    setOrderPackageArrayData(updatedArray);       
   
};

While this works, it will add same item more than once. Is there a way to make it detect an item that is already in the array, update it and return everything from the state or add the item to the array if not on the array list?
<p>So, I have a <code>useState</code> that contains data like this:</p>
<pre><code>const [orderData, setOrderData] = useState({
demoData1: '',
demoData2: '',
demoData3: '',
demoArrayData: [{itemName: '', itemNumber: ''}]
});
</code></pre>
<p>I have an <code>onClick</code> function that I would like to use to update the <code>demoArrayData</code>. However, I want to check if the item I want to add into the <code>demoArrayData</code> already exist, if it already there in the array, update it with the latest information and return both the updated item and other items there.
If the item is not on the array, add it to the array and return both the newly added item and other items there before. I have this <code>onClick</code> function:</p>
<pre><code>const handlePackageSizeSelection = (selectedItem: number, itemIndex: number, selectedItemName: string, selectedItemPrice: string )=>{


const orderedListInfo: orderedItemListAttributes = {
orderedItemName: selectedItemName,
orderedQuantity: selectedItem?.toString(),
orderItemPrice: selectedItemPrice,
orderItemSelectedIndex: itemIndex?.toString()
}
setOrderData({...orderData, demoArrayData:[...orderData?.orderedItemList as [], orderedListInfo]})
setOrderPackageArrayData(updatedArray);

};
</code></pre>
<p>While this works, it will add same item more than once. Is there a way to make it detect an item that is already in the array, update it and return everything from the state or add the item to the array if not on the array list?</p>
Continue reading...
 
Top