Apr 11 2019 09:01 AM
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:
Hoe can I make the dropdown read the state to get the data for the option property?
Best regards
Americo
Apr 12 2019 08:28 AM
@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
Apr 12 2019 10:24 AM
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
Apr 12 2019 11:09 AM - edited Apr 12 2019 11:41 AM
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}) });
Apr 12 2019 11:09 AM - edited Apr 12 2019 11:41 AM
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}) });