Forum Discussion

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
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}) });

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

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})
       });