5

I have a dropdown and a modal, and I would like to show the modal when one of the dropdown item is clicked. Is it possible? I couldn't find a way to do so because I cannot obtain the target DropdownItem, which is required by Modal's trigger props.

export class Demo extends React.Component<{}, {}> {
  private options = [
    { text: 'doNothing', value: 'doNothing' },
    { text: 'openModal', value: 'openModal' },
  ]
  render() {
    return (
      <div>
        <Dropdown
          fluid
          selection
          options={this.options}
          defaultValue={this.options[0].value} />

        <Modal trigger={<Button>trigger</Button>}>
          <Modal.Header>Select a Photo</Modal.Header>
          <Modal.Content image>
            <Modal.Description>
              <p>Some contents.</p>
            </Modal.Description>
          </Modal.Content>
        </Modal>
      </div>
    )
  }
}

1 Answer 1

9

You could use prop open of Modal to programmatically control it. When you detect that the desired Dropdown item was clicked setState appropriately.

Something among those lines.

import * as React from 'react';

export class Demo extends React.Component<{}, {}> {
  state = {
    options: [
      { text: 'doNothing', value: 'doNothing' },
      { text: 'openModal', value: 'openModal' }
    ],
    open: false
  };

  onClose = () => this.setState({open: false});
  onChange = (selected) => {
    // if the correct one is selected then...
    // this.setState({open: true});
  }

  render() {
    return (
      <div>
        <Dropdown
          fluid
          selection
          options={this.options}
          onChange={this.onChange}
          defaultValue={this.options[0].value} />

        <Modal open={this.state.open} onClose={this.onClose}>
          <Modal.Header>Select a Photo</Modal.Header>
          <Modal.Content image>
            <Modal.Description>
              <p>Some contents.</p>
            </Modal.Description>
          </Modal.Content>
        </Modal>
      </div>
    )
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.