Ajouter des éléments à un state depuis un composant enfant

Salut à tous,

Je travail actuellement sur une application avec Laravel et Inertia avec React. Je suis confronté à un petit soucis de mise à jour de données.

J’ai un modèle "Product" qui contient les classiques "id", "name", "price" que je récupère avec Laravel et que je renvoie à ma vue chargée avec Inertia.

Dans mon JSX j’affiche ces produits avec ce code :

<tbody>
  {customer ? (                                    
    <>
      {customer.products.map( (product, index) => (
        <BonCommandeProductItem product={product} key={product.id} />
      ))}
    </>
  ) : (
    <tr>
      <td colspan="6" className="px-6 py-4 text-center">Aucun produit actuellement sélectionné</td>
    </tr>
  )}
</tbody>

Je vous passe le reste du rendu HTML. je boucle sur les produits et j’affiche chaque produit via le composant <BonCommandeProductItem />

Dans ce composant, j’affiche un produit comme ceci :

return (
  <tr className="bg-white border-b hover:bg-gray-50">
    <td className="px-6 py-4 text-center">
      {product.reference}
    </td>

    <td className="px-6 py-4 text-center">
      <img className="w-10 h-10 rounded-full" src="https://picsum.photos/40/40" alt="{product.description}" />
    </td>

    <td className="px-6 py-4">
      {product.description}
    </td>

    <td className="px-6 py-4 text-center">
      {product.packaging}
    </td>

    <td className="px-6 py-4 text-center">
      {product.unit}
    </td>

    <td className="px-6 py-4 text-right">
      {product.pivot.price} €
    </td>

    <td className="px-6 py-4 text-center">
      <div className="relative flex items-center max-w-[8rem]">
        <input type="text" value="" id="quantity-input" data-input-counter aria-describedby="helper-text-explanation" className="bg-gray-50 border-x-0 border-gray-300 h-11 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5" placeholder="0" required />
      </div>
    </td>

    <td className="px-6 py-4 text-right">
      0.00 €
    </td>
  </tr>
);

L’idée ici est d’afficher la liste des produits puis pour chaque produit d’avoir un input pour indiquer une quantité et que ça calcule le total en fin de ligne en fonction de la quantité.

La difficulté et ce que j’ai du mal à concevoir c’est que je souhaite récupérer et envoyer en base de données uniquement les produits qui ont une quantité supérieure à 0.

En gros il faudrait que je "push" mon produit quand je lui met une quantité mais dans un autre tableau que celui qui contient les produits que j’affiche. Et il faudrait que ce tableau soit dans le composant parent car c’est lui qui se charge d’envoyer les données en base de données.

J’avoue je suis perdu sur ce point. Peut-être que je m’y prend mal dans la réflexion. Si quelqu’un pouvait m’éclairer ce serait sympa.

Merci d’avance

Salut, de ce que je comprends tu essaye de faire comme une liste de produit avec un bouton "Ajouté au panier".

L’idée pourrait-être d’avoir un parent qui contiens tous les elements qu’il affiche et un dictonnaire qui contiendrait le panier (les produit et leurs quantité).

Chaque composant enfant prends en paramètre une fonction. Cette fonction défini dans le parent prend en argument le nom de l’objet à ajouté au panier.

Il me semble que ça se rapproche du patron de conception de l'observateur. C’est les enfants qui préviennent leurs parent en appelant une fonction de leur parent.