Et si le nombre de commandes peut changer?

Si le nombre de commandes peut changer dynamiquement, il faut utiliser des structures de données dynamiques et des approches réactives pour afficher correctement la liste sur le frontend.

Par exemple, en React, vous pouvez stocker les commandes dans l'état du composant et le mettre à jour lors des changements :

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

// Lors de la réception de nouvelles données
function updateOrders(newOrders) {
  setOrders(newOrders);
}

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

Ainsi, l'interface utilisateur sera automatiquement mise à jour lors du changement du nombre de commandes, ou lors de l'ajout ou de la suppression d'éléments.