update a same property of all objects in an array inside map function react or react native or react hooks

user_16398144 0
Viewed 172

it is deleting all objects from the array instead of updating, want to update 'ItemDeliveryStatus' of all objects inside map function

const [arrDeliveryDetails, setArrDeliveryDetails] = useState([
    { id: 1,  ItemName:'A', ItemDeliveryStatus:1},
    { id: 2,  ItemName:'B', ItemDeliveryStatus:1},
    { id: 3,  ItemName:'C', ItemDeliveryStatus:1},
    { id: 4,  ItemName:'D', ItemDeliveryStatus:1},
  ])

const [returnCount, setReturnCount ]=useState(0)


const update= (value)=>
{

 arrDeliveryDetails.map(items => 
                {
                    
                    if(items.ItemDeliveryStatus==1)
                    {
                        
                        setArrDeliveryDetails({...items, ItemDeliveryStatus:value})
                    }

                    if (items.ItemDeliveryStatus==4)
                    {
                        setReturnCount(prev=>prev+1)                        
                    }
                })  


console.log(arrDeliveryDetails)
}
use-state react-native react-hooks reactjs
1 Answers

The issue here is enqueueing multiple state updates in a loop, each subsequent update stomps/overwrites the previous update. You can resolve this by using a functional state update. You should also use array.forEach since you aren't mapping arrDeliveryDetails to a new array, but instead are calling a callback for each element to update the component state.

const update = (value) => {
  arrDeliveryDetails.forEach(item => {
    if (item.ItemDeliveryStatus === 1) {
      setArrDeliveryDetails(items => ({
        ...items,
        ItemDeliveryStatus: value,
      }));
    }

    if (item.ItemDeliveryStatus === 4) {
      setReturnCount(count => count + 1);                      
    }
  });
}

Since React state updates are asynchronously processed, if you want to log the updated state then do this in an useEffect hook with appropriate dependency.

useEffect(() => {
  console.log(arrDeliveryDetails);
}, [arrDeliveryDetails]);
user_86908570
Related