Pass state to Dropdown options?

Question

I am trying to populate the options parameter of the Dropdown component from a state but nothing shows in Dropdown because the state is empty when the Dropdown get rendered.

this is how I am creating the state:

export interface IListState {
  views: IView[];
}

and this is how I am intializing it in the constructor:

this.state = {
    views: []
};

Then in the componentDidMount:

public componentDidMount(): void {
      this.props.provider.getViews().then((views: IView[]) => {
               this.setState({
                     views: views
               })
       });
}

And finnaly in the render I am using the Dropdown like this:

<Dropdown
        label="Disabled example with defaultSelectedKey"
        defaultSelectedKey=""
        options={this.state.views}
        disabled={false}
/>

The problem is when the web part get rendered in the console I can see that the state is empty and then it gets filled with data but the Dropdown was already rendered so it doesn't get the the data.

This what the console shows:

How can I make the dropdown read the state to get the data for the option property?

UPDATED CODE:

I updated the code and set the dropdown in a method and this how I am calling it from the render():

<div>
            { this._renderDropdown() }
          </div>

and this is hoe the method looks like:

private _renderDropdown(): any {
    const {views} = this.state;
    console.log(views);
    if(views.length > 0) {
      return(
        <Dropdown
           label="Disabled example with defaultSelectedKey"
           defaultSelectedKey=""
           options={views}
           disabled={false}
         />
      )
    }
  }

But the result is exactly the same :-(

Best regards Americo

either you set your dropdown down data in to state so whenever dropdown data will be set in to state it will cause re render hence dropdown data will be appear, or if you want a patch then in that function which you are setting data to just update state anyhow. all you need is to update state whenever drop down data changes because you need to re render in order to show the changes. — Amit Chauhan, Apr 12 '19 at 05:58

score 0 · Answer 1 · answered Apr 12 '19 at 05:51

0

You need to wait for the data before you can render the Dropdown component with populated data and maybe show loading indicator while API is still fetching.

render () {
   const { views } = this.state;
   if(views.length > 0) {
      return <Dropdown
            label="Disabled example with defaultSelectedKey"
            defaultSelectedKey=""
            options={views}
            disabled={false}
          />
   }
   return <Loading/> // your loading component if any
}

answered Apr 12 '19 at 05:51

mouthzipper

300
4
10

Thanks mouthzipper, I tried your sample but the result is exactly the same. Check my updated post. – Americo Perez Apr 12 '19 at 07:09
It is the Dropdown from Fabric UI https://developer.microsoft.com/en-us/fabric#/components/dropdown – Americo Perez Apr 12 '19 at 08:12
What I think is strange is that I have a DetailList component which set up s the same that the Dropdown and it is working. The DetailList component is also created in a method with the same const variable (but loading another state) and it is called from the render in the same way that the Dropdown and I don't have any problem rendering the list. – Americo Perez Apr 12 '19 at 08:25

Pass state to Dropdown options?

1 Answers1