SOLVED

Pass state to Dropdown options?

%3CLINGO-SUB%20id%3D%22lingo-sub-438758%22%20slang%3D%22en-US%22%3EPass%20state%20to%20Dropdown%20options%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-438758%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20populate%20the%20options%20parameter%20of%20the%20Dropdown%20component%20from%20a%20state%20but%20nothing%20shows%20in%20Dropdown%20because%20the%20state%20is%20empty%20when%20the%20Dropdown%20get%20rendered.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethis%20is%20how%20I%20am%20creating%20the%20state%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Einterface%3C%2FSPAN%3E%20%3CSPAN%3EIListState%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20views%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EIView%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CPRE%3Eand%20this%20is%20how%20I%20am%20intializing%20it%20in%20the%20constructor%3A%3C%2FPRE%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20views%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%5D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EThen%20in%20the%20componentDidMount%3A%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Epublic%3C%2FSPAN%3E%20%3CSPAN%3EcomponentDidMount%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20this%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eprops%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eprovider%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetViews%3C%2FSPAN%3E%3CSPAN%3E().%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Eviews%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EIView%3C%2FSPAN%3E%3CSPAN%3E%5B%5D)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EsetState%3C%2FSPAN%3E%3CSPAN%3E(%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20views%3A%3C%2FSPAN%3E%20%3CSPAN%3Eviews%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CPRE%3EAnd%20finnaly%20in%20the%20render%20I%20am%20using%20the%20Dropdown%20like%20this%3A%3C%2FPRE%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDropdown%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20label%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Disabled%20example%20with%20defaultSelectedKey%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20defaultSelectedKey%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20options%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eviews%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20disabled%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bfalse%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20problem%20is%20when%20the%20web%20part%20get%20rendered%20in%20the%20console%20I%20can%20see%20that%20the%20state%20is%20empty%20and%20then%20it%20gets%20filled%20with%20data%20but%20the%20Dropdown%20was%20already%20rendered%20so%20it%20doesn't%20get%20the%20the%20data.%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20what%20the%20console%20shows%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20588px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F108299i86B3D963CF7C8111%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Capture.PNG%22%20title%3D%22Capture.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHoe%20can%20I%20make%20the%20dropdown%20read%20the%20state%26nbsp%3B%20to%20get%20the%20data%20for%20the%20option%20property%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-438758%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-445976%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20state%20to%20Dropdown%20options%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-445976%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F117034%22%20target%3D%22_blank%22%3E%40Americo%20Perez%3C%2FA%3E%26nbsp%3BWhenever%20you%20set%20state%2C%20the%20component%20will%20re-render%20with%20the%20new%20state%2C%20so%20it's%20not%20really%20an%20issue%20with%20not%20having%20data%20at%20the%20time..%20The%20issue%20is%20the%20array%20of%20objects%20you%20are%20passing%20into%20the%20DropDown.%20You%20are%20trying%20to%20pass%20an%20array%20of%20items%20to%20the%20options%20property%20on%20the%20component...%20but%20what%20it%20is%20expecting%20is%20an%20array%20of%20IDropDownProps%20objects.%3CBR%20%2F%3E%3CBR%20%2F%3EPlease%20review%20the%20documentation%20on%20how%20to%20create%20the%20objects%20correctly.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcomponents%2Fdropdown%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcomponents%2Fdropdown%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-446864%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20state%20to%20Dropdown%20options%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-446864%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39836%22%20target%3D%22_blank%22%3E%40Beau%20Cameron%3C%2FA%3E%26nbsp%3B%20%2C%20yes%20following%20the%20sample%20using%20the%20IDropdownOption%20with%20static%20values%20and%20its%20works.%20Like%20this%3A%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%20_viewOptions%3A%20IDropdownOption%5B%5D%20%3D%20%5B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%7Bkey%3A%20'apple'%2C%20text%3A%20'apple'%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%7Bkey%3A%20'orange'%2C%20text%3A%20'orange'%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ebut%20the%20values%20that%20I%20need%20in%20the%20IDropdownOption%20are%20in%20the%20IView%20aray%20and%20I%20don't%20know%20how%20to%20pass%20these%20values%20into%20the%20IDropdownOption%20array.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20not%20so%20advanced%20in%20Javascript%20and%20react%20and%20some%20things%20are%20still%20mystrious%20for%20me.%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-447158%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20state%20to%20Dropdown%20options%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-447158%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F117034%22%20target%3D%22_blank%22%3E%40Americo%20Perez%3C%2FA%3E%26nbsp%3BI%20suggest%20doing%20some%20React%20training%20online%20before%20trying%20to%20build%20solutions%20in%20your%20SharePoint%20environment.%20You%20want%20to%20make%20sure%20you%20are%20putting%20in%20well%20built%20solutions.%3CBR%20%2F%3E%3CBR%20%2F%3ESo%20get%20your%20IView%5B%5D%20result%20back%2C%20loop%20through%20them%20and%20create%20a%20new%20IDropDown%5B%5D%20for%20each%20view.%20Set%20your%20state%20to%20your%20IDropDown%5B%5D.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CPRE%3Eprivate%20_options%20%3D%20IDropdownOption%5B%5D%20%3D%20%5B%5D%3B%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Ethis.props.provider.getViews().then((views%3A%20IView%5B%5D)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20views.map(view%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this._options.push(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3Aview.Id%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3Aview.Title%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7Bviews%3Athis._options%7D)%0A%20%20%20%20%20%20%20%7D)%3B%3C%2FPRE%3E%0A%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

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 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:

Capture.PNG

 

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

 

Best regards

Americo

3 Replies
Highlighted

@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

Highlighted

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

Highlighted
Solution

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