React Semantic UI - Modal without trigger?

Question

Is it possible to use a Modal without a trigger? I will open and close it via state. For example, I want to use onClick on an input field(with a file name) to open the modal with a file chooser and then edit the name of the choosen file in the input field. All this in a nested modal... Looks much simpler if I will have both modals in a parent component without the triggers, and I will display/hide them via open={true/false}

Thanks

Answer 1

Yes it is. Don't set the prop trigger (it is not required) and just provide the open value from state/props.

class container extends Component {
  state = {
    isParentOpen: false,
    isChildOpen: false
  }

  handleClick = () => {
    this.setState({
      isParentOpen: !this.state.isOpen
    });
  }

  handleFocus = () => {
    this.setState({
      isChildOpen: true
    });
  }

  render() {
    return(
      <div>
        <Modal
          open={this.state.isParentOpen}
          size="large"
        >
          ...
          <Input onFocus={this.handleFocus} />
        </Modal>
        <Modal
          open={this.state.isChildOpen}
          size="small"
        >
          ...
        </Modal>
        <Button onClick={this.handleClick} />
      </div>
    );
  }
}

(You can nest Modal if you want to)