Can someone show me how to create three cascading dropdown lists, if it is possible using the office-ui-fabric-react?
Another question, when the value is changed in the first dropdown, how do you reset the index in the second list to show the first item as selected?
As presented in this post, this is a possible way how I would implement the dynamic selection of a dropdown component. You can use the DropDown component recursively by passing the component itself as a child of another dropdown;
const SomeComponent = () => 'SomeComponent';
const Foo = () => 'Foo';
const Bar = () => 'Bar';
class ListItem extends React.Component {
handleClick = () => {
const { option: {id}, onClick } = this.props;
onClick(id);
}
render(){
const { option: { label } } = this.props;
return (
<li onClick={this.handleClick}>{label}</li>
)
}
}
class DropDown extends React.Component {
state = {
selectedOption: null
}
handleOptionClick = optionId => {
const { options } = this.props;
this.setState({ selectedOption: options.find(option => option.id === optionId).child });
}
render(){
const { selectedOption } = this.state;
const { options } = this.props;
return (
<ul>
{options.map(option => (
<ListItem
option={option}
onClick={this.handleOptionClick}
/>
))}
{selectedOption}
</ul>
)
}
}
const DropDownOptions = [
{id: '1', label: 'label-1', child: <SomeComponent />},
{id: '2', label: 'label-2', child: <DropDown options={[
{id: '2-1', label: 'label-2-1', child: <Foo />},
{id: '2-2', label: 'label-2-2', child: <Bar />}
]} />}
]
ReactDOM.render(<DropDown options={DropDownOptions} />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
optionsother dropdowns depending on the value you get atonChanged. For selecting the first item as selected, just set theselectedKeyto the first item when the first dropdown callsonChanged.onChangedcan be on each component. For simplicity, you can have 3 different methods attached to each to assure they're different. I'm not sure how all 3 are firing at the same time without looking at your code.