Resource Picker

poojafmile
Excursionist
17 1 0

Hello everyone, 

Am trying to use the product Resource Picker to select a product from my store and display the product name in a textfield.
But I think am doing it the wrong way and missing some parts, can someone please help me fix my code as below:

import React, { useState, useEffect,useCallback } from 'react'
import {TextField, Button } from "@shopify/polaris";
import styles from './auction.module.css';
import { ResourcePicker } from '@shopify/app-bridge-react';
/**
* @export
* @interface LiveAuctionProps
*/
export interface LiveAuctionProps {

}
/**
*
* @param {LiveAuction}Props props
*/
const LiveAuction = (props: LiveAuctionProps) => {


useEffect(() => {

}, [])
const [startpricevalue, setStartPriceValue] = useState('');
const [active, setActive] = useState(false);
const handleResourcePickerClose = useCallback(() => setActive(false), []);
const handleSelection = useCallback(
({ selection }) => {
//onSelect(selection[0]);
handleResourcePickerClose();
},
[handleResourcePickerClose],
);
const [productvalue, setProductValue] = useState('');
const togglePicker = useCallback(() => setActive(true), []);

return (
<div className={styles.container}>
<Button primary onClick={togglePicker}>Shopify Product Picker</Button>
<ResourcePicker
actionVerb={ResourcePicker.ActionVerb.Select}
resourceType="Product"
showVariants={true}
allowMultiple={false}
open={active}
onSelection={handleSelection}
onCancel={handleResourcePickerClose}
/>
<TextField label="Product" type="text" value={productvalue} onChange={newProductValue => setStartPriceValue(newProductValue)}/>
 
</div>

)
}
export default React.memo(LiveAuction)




0 Likes