¿Y si el número de pedidos puede cambiar?

Si la cantidad de pedidos puede cambiar dinámicamente, es necesario utilizar estructuras de datos dinámicas y enfoques reactivos para mostrar correctamente la lista en el frontend.

Por ejemplo, en React, puedes almacenar los pedidos en el estado del componente y actualizarlo cuando cambien:

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

// Al recibir nuevos datos
function updateOrders(newOrders) {
  setOrders(newOrders);
}

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

De esta manera, la interfaz de usuario se actualizará automáticamente cuando cambie la cantidad de pedidos, o cuando se añadan o eliminen elementos.