how to create cascading dropdown lists in react

Question

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?

Yes it is possible, you just have to change the options other dropdowns depending on the value you get at onChanged. For selecting the first item as selected, just set the selectedKey to the first item when the first dropdown calls onChanged. — Yuya
– Yuya, Commented Jun 23, 2018 at 19:47
can I use the same "onchanged" event handler on three components and how can I detect which component fired the event? As at the moment all three of them are firing at the same time. I am using the same component for three different data options. — Burre Ifort
– Burre Ifort, Commented Jun 23, 2018 at 20:18
onChanged can 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. — Yuya
– Yuya, Commented Jun 25, 2018 at 1:27
thanks for your reply. When I use one event handler for all three events then they fire at the same time. I have to check actually when I use three separate ones. I thought there will be a way like like in .net. — Burre Ifort
– Burre Ifort, Commented Jun 25, 2018 at 11:43

gazdagergo · Accepted Answer · 2019-01-08 09:52:33Z

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>

Collectives™ on Stack Overflow

how to create cascading dropdown lists in react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related