Polaris/Remix - resourcePicker - multiple items to state

Topic summary

Initial Problem:
A developer using Shopify’s resourcePicker with multiple: true in a Polaris/Remix app could only save the first selected product to state, despite selecting multiple items. The issue stemmed from accessing only products[0] instead of handling the entire products array.

Solution Provided:
Liam suggested using Array.prototype.map() to iterate over all selected products and create an array of product objects. The key change involves mapping through the products array to extract data (id, variants, title, handle, images) from each product, then updating formState with this complete array using setFormState({ ...formState, selectedProducts: allSelectedProducts }).

Outcome:
The original poster confirmed the solution works successfully. They noted they’ll need to pass additional data later when building a GraphQL query.

Follow-up Questions:
Another user (mohitpatel) asked about implementing similar functionality for collections with comma-separated values stored in a database, but this remains unresolved and appears to be a separate use case.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Thanks very much Liam - appreciated. That works great :slightly_smiling_face: And thanks for the tip - I will need to pass more, as I’m building a GraphQL query from the bigger picture, so a nice heads-up there.