Why is only the last object re-rendering in ReactJS when setting an array in useState?

I need to access promise Value that was returned from AWS amplify datastore. I tried using Async/await to access the promise, it didn’t work.

How should I access this promise result (React, DataStore, AWS Amplify)

this was the same problem I was facing and I tried the solution recommended by @Azzy. but it didn’t work.

if(orderResponse?.id) { const dishResponse = await DataStore.query(OrderDish, (c) => c.orderID?.eq(orderResponse.id)); console.log('dish', dishResponse); setDishes(dishResponse); }

when I tried this I got the same results. (Dish details were returned as a promise)

since it didn’t work, Then I used the useState

const [dishes, setDishes] = useState();

dishes to map the data to get the objects out of the array so I can access the orderDishDishid values to retrieve Dish data. below is the code used to map and set data in react usestate

const [orderDish, setOrderDish] = useState([]);

useEffect (() => { dishes?.map((orderdishItem) => ( setOrderDish(orderdishItem) ) ) },)

here when I console.log(orderdishItem) all the objects are showing in the console.

but only the last object is set to the “orderDish” in the usestate
const [orderDish, setOrderDish] = useState([]);

when console.log(orderDish)
only the last object is re rendering

I want to set all four objects in the useState to access the Dish Details.

please let help me to understand why only the last object is re-rendering. what i have done wrong and how to set all objects in to

const [orderDish, setOrderDish] = useState([]); using dishes?.map

if you can provide code snippets that would be really helpful.