How to render nodes sharing same trigger?

Question

My use case is kind of what I have simplified in below example. How to render components sharing same trigger?

class SomeComponent extends Component {

    render() {
        let dropDownItem = <DropDown.Item> An Item! </DropDown.Item> 

        let modal = <Modal trigger={dropDownItem}></Modal>

        let popup = <Popup trigger={dropDownItem}></Popup>

        return(
                  <DropDown.Menu>
                        {modal} or {popup} 
                  // How to share same trigger among multiple components.
                  <DropDown.Menu>
              )
    }
}

score 0 · Answer 1 · answered Aug 14 '17 at 21:39

I believe you can place one inside the other. In this instance, it would be

class SomeComponent extends Component {

render() {
    let dropDownItem = <DropDown.Item> An Item! </DropDown.Item> 

    let modal = <Modal trigger={dropDownItem}></Modal>

    let popup = <Popup trigger={modal}></Popup>

    return(
              <DropDown.Menu>
                {popup} 
              <DropDown.Menu>
          )
}}

score 0 · Answer 2 · answered Aug 20 '17 at 20:56

One solution would be to let Modal not use a trigger, but rather control it's visibility using Modal's open property:

<Modal open={this.state.isOpen}>Content</Modal>

On clicking the dropdown item, you'd set this.state.isOpen = true and the modal would be shown.

How to render nodes sharing same trigger?

2 Answers2