app-bridge-react: Multiple ResourcePicker in the same component

Shopify Expert
103 2 50

I'm new to react, so this could be a simple solution that I just don't know about.

What I'm trying to do: Using app-bridge-react and conditionally load two separate ResourcePickers - one for products, the other for collections.

Why: I'd like users to select a product, or a collection

Problem I'm having: It seems that which ever ResourcePicker loads first, that is the one that persist. The second one will never load.

I have tried to use a single ResourcePicker, and update the resourceType conditionally (product or collection), but it appears that the first render locks in the resourceType, and updating it does not change the ResourcePicker


Replies 2 (2)
Shopify Staff
Shopify Staff
58 13 27

Hi Josh,

This is working as intended, once the picker is created you can only update its options but not its resource type. If you want both a Product Picker and a Collection Picker, you need to create 2 different instances and just set the open prop on each on conditionally.

If you like, you can open a feature request issue on our repo and we can take a look at prioritizing making this a bit more intuitive:

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shopify Expert
103 2 50

I was able to solve the issue of having 2 resource pickers in the same component with the use of useCallback() when setting the open state for each picker.

Without it, I wasn't able to conditionally open the first instance, only the second instance (last rendered).


shout out to @HunkyBill and this post for some guidance -