1

I cannot open up the ResourcePicker for the life of me. I can see the state being changed from false to true when pressing the button, but the resourcepicker doesn't actually open.

<AppProvider apiKey={apiKey} shopOrigin={shopOrigin} >
        <Page>
          <TopBar pageTitle="Create Sale" primaryButton="Save" clickPrimaryButton={this.handleClick} />
          <Layout sectioned={true}>
            <Layout.AnnotatedSection title="Scheduled sale settings" description="Setup the discount and which products will be selected for the sale.">
              <Card sectioned>
                <FormLayout>
                  <TextField label="Sale name" onChange={() => { }} />
                </FormLayout>
              </Card>

              <Card sectioned>
                <FormLayout>
                  <DiscountValue />
                </FormLayout>
              </Card>

              <Card>
                <Card.Section>
                  <FormLayout>
                    <SaleCategory onSelect={this.handleSelect} />
                  </FormLayout>
                </Card.Section>
                {searchBar}
                <Card.Section>
                  <Picker />
                </Card.Section>

              </Card>
            </Layout.AnnotatedSection>
          </Layout>
        </Page>
      </AppProvider>

and then the Picker Component

import React from 'react';
import { ResourcePicker, Button } from '@shopify/polaris';

class Picker extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      resourcePickerOpen: false,
    }
  }

  render() {
    return (
      <div>
        <pre>{JSON.stringify(this.state.resourcePickerOpen)}</pre>
        <ResourcePicker
          resourceType="Product"
          open={this.state.resourcePickerOpen}
          onSelection={({ selection }) => {
            console.log('Selected products: ', selection);
            this.setState({ resourcePickerOpen: false });
          }}
          onCancel={() => this.setState({ resourcePickerOpen: false })}
        ></ResourcePicker>
        <Button onClick={() => this.setState({ resourcePickerOpen: !this.state.resourcePickerOpen })}>Open...</Button>
      </div>
    );
  }
}

export default Picker;

I expect the picker to open, but it does not. What am I doing wrong?

Doughtz
  • 359
  • 2
  • 12

1 Answers1

0

Try to put your state declaration like the following code snippet

class Picker extends React.Component {
    state = {
       resourcePickerOpen: false,
    }  

    ...

}

you can delete your constructor

Vinicius Maciel
  • 101
  • 2
  • 12