Forum Discussion

Americo Perez's avatar
Americo Perez
Iron Contributor
Apr 11, 2019
Solved

Pass state to Dropdown options?

Hi 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...
developer
  • Beau Cameron's avatar
    Beau Cameron
    Apr 12, 2019

    Americo Perez I suggest doing some React training online before trying to build solutions in your SharePoint environment. You want to make sure you are putting in well built solutions.

    So get your IView[] result back, loop through them and create a new IDropDown[] for each view. Set your state to your IDropDown[].


    private _options = IDropdownOption[] = [];

     

    this.props.provider.getViews().then((views: IView[]) => {
              views.map(view => {
                    this._options.push({
                           key:view.Id,
                           text:view.Title
                        });
                });
               this.setState({views:this._options})
       });




Beau Cameron's avatar
Beau Cameron
MVP
Apr 12, 2019

Americo Perez Whenever you set state, the component will re-render with the new state, so it's not really an issue with not having data at the time.. The issue is the array of objects you are passing into the DropDown. You are trying to pass an array of items to the options property on the component... but what it is expecting is an array of IDropDownProps objects.

Please review the documentation on how to create the objects correctly.
https://developer.microsoft.com/en-us/fabric#/components/dropdown

Americo Perez's avatar
Americo Perez
Iron Contributor
Apr 12, 2019

Thanks Beau Cameron  , yes following the sample using the IDropdownOption with static values and its works. Like this:

private _viewOptions: IDropdownOption[] = [
      {key: 'apple', text: 'apple'},
      {key: 'orange', text: 'orange'}
]

 

but the values that I need in the IDropdownOption are in the IView aray and I don't know how to pass these values into the IDropdownOption array.

 

I am not so advanced in Javascript and react and some things are still mystrious for me.

Best regards

Americo

  • Beau Cameron's avatar
    Beau Cameron
    MVP
    Apr 12, 2019

    Americo Perez I suggest doing some React training online before trying to build solutions in your SharePoint environment. You want to make sure you are putting in well built solutions.

    So get your IView[] result back, loop through them and create a new IDropDown[] for each view. Set your state to your IDropDown[].


    private _options = IDropdownOption[] = [];

     

    this.props.provider.getViews().then((views: IView[]) => {
              views.map(view => {
                    this._options.push({
                           key:view.Id,
                           text:view.Title
                        });
                });
               this.setState({views:this._options})
       });




Resources