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

[JoshHighland]

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?

[Trish_Ta]

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_...

[JoshHighland]

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