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

JoshHighland
Shopify Expert
59 0 19

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

Suggestions?

0 Likes
Trish_Ta
Shopify Staff
Shopify Staff
56 13 20

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: https://github.com/Shopify/shopify-app-bridge/issues/new?assignees=&labels=feature&template=feature_...

0 Likes
JoshHighland
Shopify Expert
59 0 19

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 - https://community.shopify.com/c/Shopify-APIs-SDKs/ResourcePicker-selection-s/td-p/741107

0 Likes