What if the number of orders can change?

If the number of orders can change dynamically, then to correctly display the list on the frontend, it is necessary to use dynamic data structures and reactive approaches.

For example, in React, you can store orders in the component's state and update it when changes occur:

const [orders, setOrders] = React.useState([]);

// When new data is received
function updateOrders(newOrders) {
  setOrders(newOrders);
}

return (
  <ul>
    {orders.map(order => (
      <li key={order.id}>{order.name}</li>
    ))}
  </ul>
);

Thus, the UI will automatically update when the number of orders changes, or when items are added or removed.